HTML言語で自分のホームページを作る


テーマTTOPに戻る

HTMLとは?

ホームページは HTML言語(Hyper Text Markup Language)で書かれたテキストファイルで表現されている."表示"メニューの"文書のソース"を選ぶと,いま表示されているホームページを表すテキストが出てくる.

ここでは,簡単なホームページを作ってみよう.

まず,教材フォルダを開き,その中の「izuno」というフォルダを開く. そこの「html」というファイルの中身を全部,自分のCD-RWにコピーしよう. 「マイコンピュータ」のアイコンをダブルクリックし,さらにCD-ROMのアイコンをダブルクリックする.そこに,教材フォルダのhtmlフォルダのアイコンをCD-RWへドラッグ(マウスボタンを押したまま移動)すればコピーできる.CD-RWは「DirectCDフォーマット済み」という種類を使うこと.また,取り出す場合には,DirectCDというソフトウェアを起動して「取り出し」ボタンを押して取り出すこと(RAINBOW GUIDEのp.118参照).

htmlという拡張子の付いたファイルはホームページを記述するためのテキストファイルであり,gifという拡張子の付いたファイルは画像ファイル(絵のファイル)である.

まず,Netscapeの画面をひとつ余分に用意する.左上のファイルメニューを選び,いちばんん上の新規作成からNavigatorウィンドウを選ぶと新しい画面がでてくる.

netscape の"ファイル"メニューから"ページを開く"を選び,出てくるウィンドウの右側にある"ファイルを選択"を押す.CD-RWを選び,その中のhtmlフォルダを選び,index-j.htmlをダブルクリックする.最後に左側の「Navigatorで開く」を押すとサンプルのホームページが表示される.これをなんとかしようと思ったら,先ほどコピーしてきたindex-j.html というテキストファイルの内容を書き替えないといけない.そこで,エディタをたち上げてこのファイルを修正してみる.

「秀丸エディタ」という名前のエディタ(テキスト編集用ソフトウェア)を起動し,「ファイル」メニューから「開く」を選ぶ.ファイル選択画面で,マイコンピュータからCD-RWを選び,そこに表示されるファイル欄でhtmlというフォルダをダブルクリックして開き,その中のindex-j.htmlを選ぶ(ダブルクリック).

< >で囲まれた部分はタグと呼ばれる記号であり,文字の大きさを変えたり画像を入れたりバックの色を変えたりするなど,ホームページの中のあらゆるデザインをコントロールする道具として使う.タグの中は大文字でも小文字でも同じだが,< >で囲まれた文字は,< >も含めて必ず英文入力モード(半角)で書くこと.日本語入力モードにしたままでは,タグと認めてくれないので注意.

まず,ホームページの上の欄に表示するタイトルを決める.

<TITLE>My Homepage</TITLE>

このホームページのタイトルが「My Homepage」であることがわかる.

<TITLE> や </TITLE>がタグである.とりあえず,ここはそのままでOK.

つぎに,

<CENTER><H2>

ようこそ,私のホームページへ

</H2></CENTER>

<P>

の中の「私」を自分の名前に書き替えて,「ファイル」メニューから「保存」を選ぶ.こうして変更内容をファイルに保存してから netscape の中で"再読込"ボタンを押してみよう.ちゃんと自分の名前に変わっている.ファイルを保存しなければ,いくら再読込しても画面は変わらないので注意.

また,netscapeで再読込をしても,修正が反映されない場合には,ファイルが保存されていないか,netscapeがキャッシュメモリというファイルの一時保存場所から読み込んでいることが考えられる. 前者なら,ファイルをちゃんと保存し直す. それでも画面が変わらなければ後者の理由が考えられるので,shiftキーを押しながら再読込ボタンを押す.

同じように index-j.html の中身の日本語の部分を好きなように書き替えると,どんどん自分だけのホームページができあがる!.とりあえず,「名前:」,「所属:」,「テーマ:」などのあとの日本語を適当に書き替えてnetscapeで自分のホームページを表示してみよう.index-j.htmlの中身を何か変更したら,その都度必ずファイルを保存し,netscapeの"再読込"ボタンを押して確認する.

次は,いよいよお楽しみの画像ファイルの貼り付け

<HR>

<img src="teddybear.gif">

<HR>

この部分では,<HR>で横線を書き,

<img src="画像ファイル名">

で図を読み込む.画像ファイルは今の所 "*.gif" という拡張子のついたgifファイルだけが使える.ちなみに,"teddybear.gif"の代わりに"puppy.gif"にすると,熊の代わりに犬の絵が貼り付けられる. エディタで変更したあと,必ずindex-j.htmlファイルを保存してからnetscapeをアクティブにして,"再読込"ボタンを押して確認してみよう.

他にも,*.gif という画像ファイルはすべて貼り付け可能.

また,どこかのページでぜひコピーしたい絵があれば,その絵の上でマウスの右ボタンを押したままにし,出てきたポップアップメニューから"画像を名前を付けて保存"を選ぶと,自分のディレクトリにコピーすることができる.しかし,肖像権や著作権に注意すること.勝手に自分のページに貼り付けることができない画像が多い.犯罪とみなされる場合があるので,注意するように.

別のホームページへリンクするときは

<UL>

<LI><A HREF="compu.html">

コンピュータなんか・・・・・</A>

</UL>

<P>

という部分がポイント.netscapeで見たときには「コンピュータなんか・・・・・」という文字だけ色がついていていて,この色文字をマウスでクリックするとcompu.htmlというページが表示される.compu.htmlというページになんでこんな絵が表示されるのかは,compu.htmlの中身を見れば一目瞭然.元のホームページに戻るには,「私のホームページに戻ります」の部分を押すか,ウィンドウ上部の"戻る"ボタンを押す.

このように,マウスで選ぶと別の場所(ホームページ)へ飛んでいけるようにすることを,「リンクする」という.何枚ものテキストがそれぞれリンクされ,互いに関係づけられているため,ハイパーテキストという.HTML言語は,それを記述する言語であり,Hyper Text Markup Languageの略.

自分のファイルとは関係ないページ,例えば,他の学生のホームページに飛んでいきたいときは,

<a href="http://www.ritsumei.ac.jp/se/~????????/">名前</a>

という記述を入れておくと,「名前」のところをクリックするだけで友人のページに飛んでいける.????????という箇所には各自のログイン名を入れる.最後のスラッシュ(/)を忘れずに.

文字ではなく,図をクリックして別の場所へ飛んで行くようにしたいときは,

<a href="http://www.ritsumei.ac.jp/index-j.html">

<img src="house.gif"></a>

というふうに文字の代わりに<img src="画像ファイル名">を挿入すればOK. netscape で見ると図(大きな家)が青い線で囲まれており,この図をクリックすると立命館大学のホームページに飛んでいける.リンク先から元に戻るには,上部の"戻る"ボタンを押す.

html ファイルの中の空白や改行は全く意味がない.netscape で見たときに改行しておきたいときには,<p>という段落の終了マーク,あるいは<br>という改行マークを入れる.

文字の大きさは6種類選べ,<h1></h1>が一番大きな文字で,<h6></h6>が一番小さな文字になる.

<OL>から</OL>の間は番号つきの箇条書きになり,<LI>で始まる文が箇条書きされる.OLの代わりに<UL>と</UL>で囲むと,番号ではなく記号付きの箇条書きになる.<DL></DL>で囲んで<DT>あるいは<DD>を使うと印なしの箇条書きになる.これらは入れ子にすることもできる.


表作成

基本的な表の作成には
<TABLE BORDER="数字">.....</TABLE>
タグを使います.表作成の基本となるタグで,この中に入れたものが表組みされます.
また, <TR>.....</TR>
が横のラインである「行セル」を表現し,
<TD>.....</TD>
が縦のラインである「列セル」を表現します.

例として,
A11 A12 A13
A21 A22 A23
A31 A32 A33

のような表を作るためには,以下のように記述すればよい.

<TABLE border="1" bgcolor="#ffffff">
<TR>
<TD>A11</TD>
<TD>A12</TD>
<TD>A13</TD></TR>
<TR>
<TD>A21</TD>
<TD>A22</TD>
<TD>A23</TD></TR>
<TR>
<TD>A31</TD>
<TD>A32</TD>
<TD>A33</TD></TR>
</TABLE>

上記で"bgcolor=...."は表の色を決めるもので,記述しない場合は背景の色と同じとなる.

この他,タグの詳細についてはこんなHP(初心者のためのホームページつくり)にも掲載されている.

きれいなホームページを見つけた時には,"表示"メニューから"文書のソース"を選べば,そのページをどのようにHTML言語で記述しているのか見ることができる.

netscapeのFileメニューからOpen URLを選び,

http://www.ritsumei.ac.jp/se/~?????????/ (~のあとは各自のログイン名)

と入力しても各自のホームページが表示される.最後の“/”を忘れないように!!
他の人のホームページにアクセスする場合はこれで見に行く.


ファイルの転送

これまでの作業でできたホームページは,CD-RWに入っていて,他の人は見ることができない.これを公開するには,特別な名前のフォルダにファイルを入れる必要がある.すでに自分のログイン名でホームページを作っている人(http://www.ritsumei.ac.jp/se/~????????/ (????????は各自のログイン名)という名前のホームページを持っている人)は,これからの作業をするとこれまでのページが消えてしまうので注意.

ファイルを転送するには,FTP(File Transfer Protocol)を利用する.「RAINBOW GUIDE 2004」のp.110を参照のこと.
FTPを利用するには,「スタート」→「プログラム」→「ユーティリティ」→「FFFTP」として,FFFTPというソフトウェアを起動する.ファイル転送を行うホスト一覧が表示されるので,理工学部のコンピュータ「remote.se.ritsumei.ac.jp」を選んで「接続」ボタンを押す.

ファイル転送の操作を行う画面が現れる.左側に今使用しているコンピュータのファイル,右側に理工学部のコンピュータ内に置かれるあなた用のファイルが表示される.まず,左側の一覧から,CD-RWを選んでダブルクリックし,さらにhtmlというフォルダをダブルクリックして,先ほど作ったホームページ用ファイルを表示させる.次に右側の一覧から,「public_html」という名前のフォルダを選んでダブルクリックする.

初めて使うときには,ファイル転送モードの設定を行う. ツールバーに「A」「B」「A/B」といったアイコンが並んでいる. AがASCIIモードでテキストとして転送. Bがbinaryモードで機械語のファイルとして転送. A/Bがファイル名で転送モードを切替える自動モード. この「ファイル名で切り替え」をマウスの左ボタンでクリックして選択しておく. これで,*.htmlや*.txtといったファイルはテキストとして転送し,*.gifや*.jpgなどのファイルは機械語のファイルとして転送される.

左側のファイルを右側までドラッグして離す(ドラッグ&ドロップ)と,選んだファイルが転送される.左側のすべてのファイル(*.htmlと*.gif)を右側へ転送する.転送が終われば,右上の×印をクリックして,FFFTPを終了させる.

転送できたかどうか確認する.Netscapeのhttp欄に,「http://www.ritsumei.ac.jp/se/~?????????/ (~のあとは各自のログイン名」と打ち込んでEnterキーを押す.あなたが先ほど作ったページが表示されればOK.



ホームページ作成の注意点:

1.著作権や肖像権の問題もあるので,画像ファイルの使用については注意すること.

2.最終更新日と,作成者の氏名を記入すること.

3.不用意な個人情報の開示をしないこと.例えば電話番号や住所など.どこの誰が見るかわからない.ネットストーカーによる嫌がらせを受けないよう注意.


テーマTTOPに戻る