ものぐさホームページづくり（6月11日更新）
目次
ホームページ作成講習会！（7/11.7/18）
用意するもの
とりあえず作業場所を作る
テキストだけのサンプルページ
背景画像をつけてリッチな気分に浸る
ホームページ素材集（リンク）
ホームページづくり支援サイト
ホームページに画像を張り付ける
付録ーｆｔｐの仕方その１
テキストファイルで保存してあります（エディタかワープロが立ち上がるはず）
AA研プロフィール（日本語）用サンプル
AA研のホームページ（日本語）サンプル
用意するもの
- ネットワークにつながったパソコン(^^;)
・・とりあえず繋がってなくても素材は作れますが、 ものぐさ式の場合は不利です。 - ブラウザ（インターネットエクスプローラー、またはネットスケープ）
できるだけバージョンの高い（最新の）ものをインストールしましょう。 - テキストエディター
- Ｍａｃ・・・「simple text」でもいいですが、
大きな文書が開けてしかもファイルが軽い「YoEdit」
などのほうがよいでしょう。
- Ｗｉｎｄｏｗｓ・・・「メモ帳」でもいいですが、
もっといいエディタがあったらそちらを使ってください。
- Ｍａｃ・・・「simple text」でもいいですが、
大きな文書が開けてしかもファイルが軽い「YoEdit」
などのほうがよいでしょう。
- まずは作業用のフォルダーをつくりましょう。
マックの場合はMacintoshHD、 ウインドウズの場合はＣドライブに保存するのがいいでしょう。 フォルダーの名前はなんでもいいのですが、 「minakoHP」とか、自分にわかりやすい名前にしましょう。
- そのフォルダーの中に用意したテキストエディターで「index.html」
というファイルを作ります。
新規書類を開き、下の絵のように打ち込んだ後に
「index.html」の名前で保存してください。 - 次に、そのフォルダーの中に「images」というフォルダーを作って
ください。・・これで、「minakoHP」というフォルダーの中には、
下の図のように
「index.html」というファイルと「images」というフォルダーができている
はずです。できましたか？？
- テキストだけで作るホームページのサンプルをつくりました
こちらをクリックしてください。ソース表示に切り替えると・・世話焼きの意味が わかります(^^;)今日は時間がなかったのでタグの説明はまた今度・・・
- 背景に画像を貼り付けてみましょう。
「＜ＢＯＤＹ Ｂａｃｋｇｒｏｕｎｄ”ｉｍａｇｅｓ/ｂａｃｋ２．ｇｉｆ＞」
というタグをつければＯＫ。「images」フォルダー内の「back2.gif」 という名前のＧＩＦ形式の画像（後ほど説明します）をバックグラウンドに貼り付ける という意味です。(半角英数字で打ち込んでくださいね！！）
こちらをクリックしてください。 ソース表示に切り替えて確認してみてください。
以下、フリー素材の背景用画像をアップしました。「画像を保存」で御自分のマシンに 取り込んで、御自由にお使いください。画像を「images」フォルダーに入れるのを 忘れないでくださいね。
- 画像を張り付ける時のタグは、＜ＩＭＧ ＳＲＣ＝”ｉｍａｇｅｓ／ファイル名．ｇｉｆ”＞です。（gif画像の場合）
＜ＩＭＧ ＳＲＣ＝”ｉｍａｇｅｓ／ファイル名．ｇｉｆ”ａｌｉｇｎ＝”ｌｅｆｔ”＞にすると画像が左に文字が右に表示されます。右側に写真の説明などを書き加えることができます。
＜ＩＭＧ ＳＲＣ＝”ｉｍａｇｅｓ／ファイル名．ｇｉｆ”ａｌｉｇｎ＝”ｒｉｇｈｔ”＞にすると画像が右に、文章が左。左側に説明を書くことができるのです。
＜ＩＭＧ ＳＲＣ＝”ｉｍａｇｅｓ／ファイル名．ｇｉｆ”ａｌｉｇｎ＝”ｃｅｎｔｅｒ”＞これでテキストを画像の真ん中に表示できます。でもテキストは１行だけで、あとは画像の下に表示されてしまいます。
＜ｃｅｎｔｅｒ＞というタグで囲んで
＜ｃｅｎｔｅｒ＞
＜ＩＭＧ ＳＲＣ＝”ｉｍａｇｅｓ／ファイル名．ｇｉｆ”＞＜ＢＲ＞
＜／ｃｅｎｔｅｒ＞
とするとちゃんと画像の下に文章が表示させられるのです。