ＷｅｂＰａｇｅ発射台（初心者の、初心者による、初心者のためのＷｅｂＰａｇｅ作り講座）ＷｅｂＰａｇｅ発射台（初心者の、初心者による、初心者のためのＷｅｂＰａｇｅ作り講座）
ここから雛形をダウンロードしてくださいメモ帳でタグをうつ・・・・・これが一番確実かも。
| まずは |
ダウンロードしたら次のｍｙｐａｇｅ＿ｋｉｈｏｎを改造する
に進みましょう。
初心者の方はこの下は読み飛ばしていただいても結構です。
| 参考：ダウンロードではこのようなページがもらえます。 | ||
| index.html 目次のページです ┣index-1.html 文字だけのページです ┣index-2.html ｊｐｇ画像を貼り付ける例 ┣index-3.html ｇｉｆ画像を貼り付ける例 ┣index-4.html 他サイトへのリンク例 ┗index-99.html ここで練習をします index-a.html 新規にページを作るときに使って下さい。（コピー＆貼り付け＆名前の変更） 基本の基本です。 index.htmlからindex-1.html、index-2.html、index-3.html、index-99.html各ページにリンクを貼ってあります。
|
| index.html これをブラウザで見ると・・・・・ |
| <html> <head> <title> 基本の作品例 Kefi_Pallhkari Ver.2006_1 目次ページ </title> </head> <body> <!--この下に本文を書きましょう--> <!--このようなカッコ内の文はブラウザには現れません。メモに使えます--> 基本の作品例 Kefi_Pallhkari Ver.2006_1 目次<br> <!--各ページへのリンク--> <a href="index-1.html">１ページめへ行く</a><br> <a href="index-2.html">２ページめへ行く</a><br> <a href="index-3.html">３ページめへ行く</a><br> <!--練習２：ここに４ページ目に行くリンクを作ってみましょう--> ４ぺーじめへ行く<br> <br> <a href="index-99.html">練習ページ９９へ行く</a><br> <!--これは水平線です--> <hr> <!--ここに更新記録を書きます--> ２３４５年２月２８日：初回製作。４つの各ページを書いた<br> ２３４５年３月 １日：３つのページをリンクでつなげた<br> ２３４５年３月 ２日：各ページに＜！−−何々−−＞といったコメント文を入れた。<br> ２３４５年３月 ３日：minikabuto.jpg と zukei.gif を貼りつけた<br> </body> </html> |
| index-1.html |
| <html> <head> <title> １ページ目です。文字だけのページの例 </title> </head> <body> <!--このようなカッコ内の文はブラウザには現れません。メモに使えます--> ここは１ページめです。<br> カッコ・ビー・アール・閉じカッコ、で改行できます<br> 表示＞ソース の順にクリックしてメモ帳を開いて下さい。<br> <!--この下に書き込み練習をしましょう。--> <!--ソースを書き直したら ファイル＞上書き保存 をクリックします。--> <!--メモ帳の右上のバツをクリックして、このメモ帳を閉じて下さい。--> <!--目次に戻るリンク--> <a href="index.html">目次に戻る</a><br> </body> </html> |
| index-2.html |
| <html> <head> <title> ２ページ目です。ｊｐｇ画像も貼り付けたページの例 </title> </head> <body> <!--この下に本文を書きましょう--> <!--このようなカッコ内の文はブラウザには現れません。メモに使えます--> ここは２ページめです。<br> カッコ・ビー・アール・閉じカッコ、で改行できます<br> <!--ｐｉｃフォルダーの中のｋａｂｕｔｏ．ｊｐｇ画像を貼り付けます--> <img src="pic/minikabuto.jpg" width="80" height="60"><br> <!--この下に書き込み練習をしましょう。--> <!--ソースを書き直したら ファイル＞上書き保存 をクリックします。--> <!--メモ帳の右上のバツをクリックして、このメモ帳を閉じて下さい。--> <!--目次に戻るリンク--> <a href="index.html">目次に戻る</a><br> </body> </html> |
| index-3.html |
| <html> <head> <title> ３ページ目です。ｇｉｆ画像も貼り付けたページの例 </title> </head> <body> <!--この下に本文を書きましょう--> <!--このようなカッコ内の文はブラウザには現れません。メモに使えます--> ここは３ページめです。<br> カッコ・ビー・アール・閉じカッコ、で改行できます<br> <!--ｐｉｃフォルダーの中のｚｕｋｅｉ．ｇｉｆ画像を貼り付けます--> <img src="pic/zukei.gif" width="150" height="60"><br> <!--この下に書き込み練習をしましょう。--> <!--ソースを書き直したら ファイル＞上書き保存 をクリックします。--> <!--メモ帳の右上のバツをクリックして、このメモ帳を閉じて下さい。--> <!--目次に戻るリンク--> <!--練習１：ここに目次に戻るリンクをつけてみましょう--> </body> </html> |
| index-4.html |
| <html> <head> <title> ４ページ目です。他サイトへのリンク例 </title> </head> <body> <!--この下に本文を書きましょう--> <!--このようなカッコ内の文はブラウザには現れません。メモに使えます--> ここは４ページめです。<br> カッコ・ビー・アール・閉じカッコ、で改行できます<br> <!--他サイトへのリンク--> <a href="http://members.at.infoseek.co.jp/kefi/5taku/index.html">五択問題へのリンク</a><br> <!--この下に書き込み練習をしましょう。--> <!--ソースを書き直したら ファイル＞上書き保存 をクリックします。--> <!--メモ帳の右上のバツをクリックして、このメモ帳を閉じて下さい。--> <!--水平線を引くタグ--> <hr> <!--目次に戻るリンク--> <!--練習３：ここにも目次に戻るリンクをつけてみましょう--> 目次に戻る </body> </html> |
| index-99.html |
| <html> <head> <title> ９９ページ目です。ここで練習をします </title> </head> <body> <!--この下に本文を書きましょう--> <!--このようなカッコ内の文はブラウザには現れません。メモに使えます--> ここは９９ページめです。<br> カッコ・ビー・アール・閉じカッコ、で改行できます<br> <!--ｐｉｃフォルダーの中のｋａｂｕｔｏ．ｊｐｇ画像を貼り付けます--> <img src="pic/minikabuto.jpg" width="80" height="60"><br> <!--この下に書き込み練習をしましょう。--> <!--ソースを書き直したら ファイル＞上書き保存 をクリックします。--> <!--メモ帳の右上のバツをクリックして、このメモ帳を閉じて下さい。--> <!--目次に戻るリンク--> <a href="index.html">目次に戻る</a><br> </body> </html> |
| index-a.html |
| <html> <head> <title> この行に書いたタイトルはブラウザのタイトルバーに表示されます。このように一行だけ書きます。文字サイズや文字色等のタグはつけてはいけません。 </title> </head> <body> <!--この下に本文を書きましょう--> <!--このようなカッコ内の文はブラウザには現れません。メモに使えます--> これがＷｅｂＰａｇｅの基本です<br> 新規にページを作るときは<br> このファイルを右クリックでコピーし<br> 貼り付け<br> 名前の変更で<br> index-9.htmlとか書きなおし<br> 使ってください<br> <!--この下に書き込み練習をしましょう。--> <!--ソースを書き直したら ファイル＞上書き保存 をクリックします。--> <!--メモ帳の右上のバツをクリックして、このメモ帳を閉じて下さい。--> </body> </html> |
Last update Jul.3,2006
minikabuto.jpg 幅８０ピクセル 高さ６０ピクセルのｊｐｇ画像
zukei.gif 幅１５０ピクセル 高さ６０ピクセルのｇｉｆ画像