ＨＴＭＬを使ってホームページをつくる Ⅲ


　　　　　次はリンクページを作ってみましょう
　　　　　リンクと言うのはつなぐという意味です（⌒^⌒)ｂ
　　　　　つまり、あなたのホームページと他のサイトさんを繋げるのですが
　　　　　それはお友達のホームページだったり素材を提供してくれた
　　　　　サイトだったりします
　　　　　シンプレストさんのところでタグ付きの素材を提供してくれてますので
　　　　　ここを参考にしていきます

　　　　　　　　　　 　　　　

★リンクページを作りましょう★



　①「index.html」の上にカーソルを合わせて右クリックしましょう
　　コピーっていうのがあるので、これを左クリックします
　　そうで～～す！プロフィールの時と同じですよ　く（＾＿・）ゝ～～★




　②何も無い所でもう一度右クリックしてください
　　貼り付けがあるので、それを左クリックしましょう




　③index.htmlのコピーが出来ましたね　（⌒^⌒)ｂ
　　これを右クリックして「名前を変更」しておきましょう
　　名前は「link.html」にします

　　④メモ帳を開いて今度は「link.html」ドキュメントをドラッグしましょう
　　プロフィールの時と同じタグがすでに書かれていますねぇ


　　こんな風にすると何ページでも増やせることがわかりましたねぇ！
　　別に「index.html」をコピーする方法だけじゃなく
　　最初に「index.html」を作ったようにいきなり作ってもいいんですよ
　　もちろんその場合はメモ帳にドラッグした時は真っ白のままですが・・・
　　なーんだ！簡単じゃない！って気づいちゃいました？　♪～(￣ε￣；)


　　⑤それではまたまたシンプレストのメニューの中でリンクから好きな素材を選びます
　　※上のほうにメニューがあるので一覧を左クリックすると色んな種類が見れますよ


　　⑥選んだらその素材の下にあるタグの部分を左クリックするとタグ全体が青に変わりましたねぇ
　　それから、その上のコピーを押します 　　下のようにメモ帳の赤字の部分に貼り付けましょう
<html>
<head>
<title>ここにはホームページのタイトルを書く（例　ekuboisland)</title>

</head>
<body　background="img/kabe.gif">

　　
                 

<div align="center">


<img src="img/welcome.gif" width="422" height="55" border="0" alt="welcome">
<div>






私の記念すべき１ページです  




 ↓（ここに書き込みます）



<!--＊　はじめ　＊-->
<table><tbody><tr><td>
<div style="border:1px dashed #ffcccc;padding:10px">
<table cellspacing="0" cellpadding="0" style="font-size:13px"><tbody><tr><td style="border-right:1px dashed #ffcccc;padding:10px;height:100px">
<a href="リンク先ＵＲＬ" target="_top">
<img src="バナーのＵＲＬ" border="0" width="幅(ピクセル)" height="高さ(ピクセル)"></a>
</td><td style="padding:15px">
<p><a href="リンク先ＵＲＬ" target="_top">ここにサイト名</a></p>
ここに紹介
</td></tr><tr><td style="border-right:1px dashed #ffcccc;border-top:1px dashed #ffcccc;padding:10px;height:100px">
<a href="リンク先ＵＲＬ" target="_top">
<img src="バナーのＵＲＬ" border="0" width="幅(ピクセル)" height="高さ(ピクセル)"></a>
</td><td style="border-top:1px dashed #ffcccc;padding:15px">
<p><a href="リンク先ＵＲＬ" target="_top">ここにサイト名</a></p>
ここに紹介
</td></tr><tr><td style="border-right:1px dashed #ffcccc;border-top:1px dashed #ffcccc;padding:10px;height:100px">
<a href="リンク先ＵＲＬ" target="_top">
<img src="バナーのＵＲＬ" border="0" width="幅(ピクセル)" height="高さ(ピクセル)"></a>
</td><td style="border-top:1px dashed #ffcccc;padding:15px">
<p><a href="リンク先ＵＲＬ" target="_top">ここにサイト名</a></p>
ここに紹介
</td></tr></tbody></table></div>
</td></tr></tbody></table>
<!--＊　おわり　＊-->

<br>

</body>

</html>

　　　それでは１度画面を見てみましょう。大体のレイアウトがわかりましたか？
　　　薄い枠の中に「ここにサイト名」と「ここに紹介」が見えますね。v(=∩_∩=)
　　　このタイプのタグは透過（背景が透けて見える）のものなので
　　　他のものを選ぶともっとメリハリがあるかも・・・

☆　タグ説明　☆
　<tbody>　</tbody>　＝ この中が本体部分ですと言う事
　<a href="リンク先ＵＲＬ">　＝　リンクタグで、リンク先のアドレスを記入します
　<img src="バナーのＵＲＬ>＝　イメージは先に画像で勉強したのと同じです
　　　　　　　　　　　　　　　　　　　バナーのところに（例　img/★.gif )などのイメージタグを入れるのですが
　　　　　　　　　　　　　　　　　　　リンク先でバナーを配布してるので、先に自分のimgフォルダに保存しておく必要
　　　　　　　　　　　　　　　　　　　があります


⑦それではリンクに書き込んでいきましょう
　　日本語で書いている部分に書き込みますよ
　　←まずはこれを右クリックして「img]フォルダに「名前を付けて画像を保存」してね
　　


<html>
<head>
<title>ここにはホームページのタイトルを書く（例　ekuboisland)</title>

</head>
<body　background="img/kabe.gif">

　　
                 

<div align="center">


<img src="img/welcome.gif" width="422" height="55" border="0" alt="welcome">
<div>






ここのページはリンクページになります  


　　　　↑（ここのところも変えましょう）


 ↓（ここのブルーの文字のところを変えていきます）



<!--＊　はじめ　＊-->
<table><tbody><tr><td>
<div style="border:1px dashed #ffcccc;padding:10px">
<table cellspacing="0" cellpadding="0" style="font-size:13px"><tbody><tr><td style="border-right:1px dashed #ffcccc;padding:10px;height:100px">

　　　　　　　↓ここがリンク先のアドレス
<a href="http://hccweb1.bai.ne.jp/~hdgc0901/" target="_top">

　　　　　　　↓上で画像保存したイメージタグ
<img src="img/link.png" border="0" width="88幅(ピクセル)" height="31高さ(ピクセル)"></a>
</td><td style="padding:15px">
<p><a href="http://hccweb1.bai.ne.jp/~hdgc0901/" target="_top">ekuboisland</a></p>
ここはエクボの趣味兼超初心者にもホームページを持ってもらいた～い!サイト(*＾Ｏ＾*)v　ピース♪
</td></tr><tr><td style="border-right:1px dashed #ffcccc;border-top:1px dashed #ffcccc;padding:10px;height:100px">
<a href="リンク先ＵＲＬ" target="_top">
<img src="バナーのＵＲＬ" border="0" width="幅(ピクセル)" height="高さ(ピクセル)"></a>
</td><td style="border-top:1px dashed #ffcccc;padding:15px">
<p><a href="リンク先ＵＲＬ" target="_top">ここにサイト名</a></p>
ここに紹介

　　　　　　　　　　　　　　　　↓ここの緑のタグ部分を何度もコピー→貼り付けすることで枠が増やせます
</td></tr><tr><td style="border-right:1px dashed #ffcccc;border-top:1px dashed #ffcccc;padding:10px;height:100px">
<a href="リンク先ＵＲＬ" target="_top">
<img src="バナーのＵＲＬ" border="0" width="幅(ピクセル)" height="高さ(ピクセル)"></a>
</td><td style="border-top:1px dashed #ffcccc;padding:15px">
<p><a href="リンク先ＵＲＬ" target="_top">ここにサイト名</a></p>
ここに紹介
</td></tr>
　　　↓ここのタグ</tbody>の前にに貼り付ける
</tbody></table></div>
</td></tr></tbody></table>
<!--＊　おわり　＊-->

<br>

</body>

</html>


　　↓こ～～んな感じになりましたか？
　　　あとは同じように「リンク先ＵＲＬ」「バナーのＵＲＬ」「ここにサイト名」「ここに紹介」に書き込んでいきましょう

　　 　

　　　　ここまで出来たら上出来！！(＾－＾)//　パチパチ
　　　　これで大まかなホームページの成り立ちは理解できたかなぁ?(;^_^A
　　　　後のページはあなたのセンスしだい！！　色々工夫して楽しいホームページを作ってくださいね

　　　⑧　ネットでホームページを公開する時、「index.html」ページが一番最初のページとして認識されますので
　　　　 　　　　　インデｯクスページ・プロフィールページ・リンクページも繋げておきましょう（リンクする）

　
　　　　<a href="profile.html"alt="プロフィール">プロフィールへ</a>　

　　　　　　　↑たとえば、プロフィールのページにリンクするにはタグはこんな感じです
　　　　　　　　　最初のページの空白のところに貼り付けてみてください。
　　　　　　　　　そこのプロフィールをクリックするとリンクしますよ
　　　　　　　　　シンプレストでメニューのタグをコピーしてきてもいいですね


　　　次のページはいよいよインターネット上で公開する方法ですo(*°∀°)o ワクワク

　　　戻る　次へ

ホームページへ トップページを作る プロフィールページを作る リンクページを作る
インターネットで公開する レンタルサーバーを使う テンプレート素材を使う 掲示板

SEO [PR] 爆速!無料ブログ 無料ホームページ開設 無料ライブ放送