HPデビュー！（ＨＰ作成講座-超初級編）
その４（壁紙の設定、表の挿入、日記帳をつける！）
ここで、カウンターと掲示板のついた簡単なページが出来上がりました。ここでは単純な背景を模様のついたものに変更させさらに表を挿入し日記帳もつけていきます！！
| ステップ | 背景画をつけよう！ | 準備：index.htmlファイルが入っているフォルダをここでは「実験」フォルダとします。 |
| 1 | 画像ファイル(gif)を用意します！（マイコンピュータ→Cドライブ→ウィンドウズ→雲をダブルクリック！ 一度開いた後、ファイル→名前を付けて保存を選択！保存する場所を実験フォルダ｛index.htmlファイルが入っているフォルダ｝、ファイル名を「kumo」と変更させ、ファイルの種類を「*gif*」にします。 | ここではウィンドウズフォルダに入っている雲.bmpを開きます！尚、ファイルの名前に漢字が入っている場合、geocitiesにファイルを転送する際エラーになりＵＰできないので、必ず半角英数で名前を付けてください！ |
| 2 | 背景画像を表示させるタグ <BODY background="ファイル名"> 〜 </BODY> を入れます |
メモ帳を起動させ、ファイル→開くで、ファイルの種類を「すべてのフォルダにし、実験フォルダ内のindex.htmlを開きます。 |
| 3 | <HTML> <HEAD> <TITLE>HP作成実験 </TITLE> </HEAD> <BODY background="kumo.gif"> ＨＰ作成実験 <BR> <IMG SRC="@geocounter"> <BR> <P><A href="http://www.accessup.net/cgi-bin/bbs.cgi?dori4770" target="_blank">掲示板</A></P> </BODY> </HTML> |
赤字で書いたタグが今回追加するタグです！ ＩＥ（インターネットエキスプローラ）でindex.htmlを開くと背景画像がついていることを確認できます。 |
| ステップ | 次にトップページに表を挿入します！また、トップページの題目も入れます！ | |
| 1 | <HTML> <HEAD> <TITLE>HP作成実験 </TITLE> </HEAD> <BODY background="kumo.gif"> ＨＰ作成実験 <BR> <IMG SRC="@geocounter"> <BR>私のホームページにようこそ♪ <TABLE border="1"> <TR><TD>コンテンツ</TD> <TD>せつめい</TD></TR> <TR><TD>プロフィール</TD> <TD>私の秘密がわかるかも？</TD></TR> <TR><TD> <P><A href="http://www.accessup.net/cgi-bin/bbs.cgi?dori4770" target="_blank">掲示板</A></P> </TD> <TD>カキコよろしく！</TD> <TR><TD>日記帳</TD> <TD>少しずつ書いていきます！</TD></TR> </TABLE> </BODY> </HTML> |
変更箇所は赤字になっています！ また、作業中はメモ帳とＩＥを同時に起動させメモ帳を上書き保存させたら、その都度ＩＥを更新させるとタグの挿入の結果がその都度確認できます！ |
| ステップ | 日記帳をつけよう！ | ジオシティには標準で日記帳がついてきますが、ここでは無料日記帳を利用します。 |
| 1 | ここではピュアシルクにいって無料日記帳をゲットします！ここをクリックすればピュアシルクにいけます！ | |
| 2 | 無料日記帳の申請フォームへ行きます。次に「フリー版無料日記帳」、「会員版無料日記帳」の申請フォームがありますが、ここでは会員版を利用することとし、先ず会員登録フォームへいきます。必要事項を入力して送信するとインターネット接続用のメールアドレスにメールが送られてきます。次に再度ピュアシルクに行き、会員版無料日記帳の申請フォームへいきます！ここで、会員ＩＤ、送信されてきたパスワード、希望日記帳ＩＤを入力し、日記帳のタイトルとＨＰアドレスを入力します。その後、ピュアシルクより日記帳パスワードと日記帳のアドレスが送られてきます。 ここで送られてきた日記帳のアドレスは http://www.provide2.jpn.org/diary_c/diary.cgi?id=0421ta でした |
今後日記帳にフレームを入れた場合、ちとややこしくなりますが、とりあえずここではＨＰアドレスを入力します。 | TR>
| 3 | <HTML> <HEAD> <TITLE>HP作成実験 </TITLE> </HEAD> <BODY background="kumo.gif"> ＨＰ作成実験 <BR> <IMG SRC="@geocounter"> <BR>私のホームページにようこそ♪ <TABLE border="1"> <TR><TD>コンテンツ</TD> <TD>せつめい</TD></TR> <TR><TD>プロフィール</TD> <TD>私の秘密がわかるかも？</TD></TR> <TR><TD> <P><A href="http://www.accessup.net/cgi-bin/bbs.cgi?dori4770" target="_blank">掲示板</A></P> </TD> <TD>カキコよろしく！</TD> <TR><TD> <A href="http://www.provide2.jpn.org/diary_c/diary.cgi?id=0421ta" target="_top">日記帳</A></TD> <TD>少しずつ書いていきます！</TD></TR> </TABLE> </BODY> </HTML> |
追加する個所は赤字のところです！ |
| 4 | これで、ホームページに日記帳ができました！ | ここまでの出来上がりはここにあります。 |