ＨＰ作成講座

１時間で出来るホームページ作成講座

はじめに
　初心者の皆さんはまだまだパソコンを「使っている」という感覚ではなく、腫れ物に触るような感覚だろうと思われます。
　そこで今回ホームページ作りを通して少しでもパソコンに慣れるようにしましょう。初めだから分からなくて当然です、分からないことは遠慮せずにどんどん先輩方に聞いてみましょう。

Lesson1　ホームページの仕組み

Lesson1　ホームページの仕組み
　ホームページは『？？？？？.html』もしくは『？？？？？.htm』というテキストファイルを『ブラウザ』と呼ばれるアプリケーションで読み込んできて表示させる仕組みになっています。この際にそのページのプログラムとなるのが『？？？？？.html』ファイルで、これを見たいときはブラウザの『ソース表示』を選びます。これに文章を書いたり写真を載せろという命令を書きます。この命令のことを『タグ』といいます。

左の図の＜＞でくくられたものがタグで、かっこの中の単語で様々な命令を行います。また、そのタグの終わりは＜/???＞といったように単語の前にスラッシュを付けます。しかし、改行タグ＜BR＞や、線を入れるタグ＜ＨＲ＞等のように単独でその役割を果たすものもあります。 またタグは必ず半角英語で書きます。 タグについてはここではあまり触れませんので皆さん、必要に応じて自己勉強しましょう。
★ファイル名は拡張子も含めて小文字で書きましょう。あとで面倒なことになります。

あるページから異なるページに行けるようにすることを『リンク』または『ジャンプ』といいます。リンクを張るためのタグは＜A HEFF="リンク先"＞テキスト、画像など＜/A＞で、自分のホームページの他のページにリンクさせる場合（Ａ）と、まったく違う所に飛んでゆく（Ｂ）の場合があります。Ｂの場合は＜A HREF="リンク先"＞のリンク先の部分にアドレスを入れるだけです。しかしＡの場合はページ同士のフォルダの階層関係が重要となってきます。

例えばこの場合「index.html」から1階層下のフォルダprofile内の「profile.html」にリンクさせる場合は＜A HREF=" profile/ profile.html"＞となり、逆に「profile.html」から1階層上の「index.html」にリンクさせる場合は＜A HREF=" ../ index.html "＞となります。
この考え方は画像を載せるときにも同じです。同じフォルダ内に画像ファイルがある場合は＜IMG SRC="ファイル名"＞となります。
★"？？？"内のファイル名は拡張子も含めて小文字で書きましょう。
また、ページ毎に背景のGIF画像や自分の写真のｊｐｇ画像は同じフォルダにまとめていた方が後で更新するときに分かり易くてよいでしょう。

Lesson2　盗人世に蔓延る
さて、だいたいの概要が分かって来たところで今度は実際にＨＰを作って見ましょう。
注：誰かのを参考にしてＨＰを作ることは常識なので気にしないように・・・
①まず、ネット上で自分のＨＰのレイアウトにしたいと思われるページを探します。これは卒業生でもいいし、現在のメンバーのでもよいです。
②次に「表示」「ソース表示」を選択してそのページのソース表示させます。
③表示されたソースを自分のフォルダまで持ってきて「保存」します。
④これで画像のない、字だけですが自分のＨＰができました。試しに適当に文書を書き直して「上書き保存」しましょう。
⑤さて、自分のＨＴＭＬファイルを表示させる方法ですが、ブラウザの「ファイル」「開く」を選択し、「参照」を選び、自分のＨＴＭＬファイルを開きましょう。ちなみにここではショートカットは使えません。
⑥リロード（更新）して見てください、ほぅ～ら、できたでしょう。もし背景が画像ではなく色指定をしていたらそこを書き換えてどう変化するか見てみましょう。書き換えたら「上書き保存」を忘れずに・・・
次にページを華やかにする背景などの画像を拾ってきましょう。
⑦ほしい壁紙があったらその画像の上で「右クリック」します。そこにある「名前をつけて背景を保存」を選択し、自分のフォルダまで持っていきます。ボタンやその他の画像は「名前をつけて画像を保存」を選び、同様にします。
◆ちなみに壁紙指定するタグは＜BODY BACKGROUND="ファイル名"＞
◆画像を指定するタグは、同じフォルダ内に画像ファイルがある場合は＜IMG SRC="ファイル名"＞
⑧ネット上には様々なフリーのＨＰ素材集があるのでそれらを集めたり、フォトショップ等で自分でタイトル画像を作ったり、デジカメで撮った自分の写真等を乗せたりして自分だけのＨＰにじゃんじゃん書き換えていきましょう。
ではがんばって！！

HOME
Copyright (C) Kaniti MAEDA, Oita UNIV., JAPAN
このホームページに関するご意見・ご感想はこちらまで
kan@arch.oita-u.ac.jp