2007-01-11

ホームページの原稿を書きましょう

今回から、ホームページの作り方を勉強しましょう。
作ったページは、学内なら他の人にも見せることが出来ます。

ホームページの原稿は、HTMLという言語で書かれています。
秀丸エディタを使って

<FONT COLOR="red">こんにちは</FONT>こんばんわ

と書いてください。このとき、VBA同様、<FONT COLOR="red">などは仮名漢字変換をOFFにして入力してください。そして「名前を付けて保存」でhello.htmという名前でW:ドライブに保存してください。保存したら、W:ドライブを開いて、hello.htmというファイルをダブルクリックしてください。
 注)W:ドライブが無い人は、情報基盤センターのホームページを見てください。このページは学外からは見られないかもしれません。
こんにちは、という文字が赤く表示され、こんばんわ、という文字は黒く表示された筈です。そして<FONT COLOR="red">などは表示されていないでしょう。

< >で挟まれた部分は、実際には表示されず、表示を飾る命令になります。
<FONT COLOR="red">は文字を赤くしなさい、という命令、そして</FONT>は文字に関する命令おわり、という意味です。このように、HTML言語では<命令>と</命令>がペアで使われます。

では、本格的にホームページの原稿を作ってみましょう。基本的なHTMLファイルは

<HTML>
<HEAD>
<TITLE>
タイトル
</TITLE>
</HEAD>
<BODY>
本文
</BODY>
</HTML>

です。これをindex.htmというファイル名で保存してから、インターネットエクスプローラーで

http://www.edu.cc.okayama-u.ac.jp/自分のユーザー名/

を見てください。先ほど書いたファイルの内容が表示されたはずです。
先ほど書いたファイルの説明をします。

<HTML>  ←ここからHTMLファイルが始まります。
<HEAD>  ←ここから前書きが始まります。
<TITLE>  ←ここからタイトルが始まります。
タイトル     ←ホームページのタイトルです。自由に書き換えてください。
</TITLE>  ←ここまでがタイトルです。
</HEAD>  ←ここまでが前書きです。
<BODY>  ←ここから本文が始まります。
本文      ←ホームページの本文です。自由に書き換えてください。
</BODY>  ←ここまでが本文です。
</HTML>  ←ここまでがHTMLファイルです。

これだけでは本文が物足りないので、色々飾りましょう。沢山のコマンドがありますが、この講義ではその中の一部だけを紹介します。全部のコマンドは HTMLタグリファレンスを見てください。

  • 改行は<BR>、段落は<P>です。
  • 本文全体の色を決めるには、<BODY TEXT=文字の色 BGCOLOR=背景の色>と書きます。例えば<BODY TEXT="white" BGCOLOR="black">のように。
    詳しくは <BODY>を見てください。
  • 一部分の文字の色を変えるには、上の例のように<FONT COLOR=文字の色>と書きます。大きさを変えるなら<FONT SIZE=大きさ>です。例えば<FONT COLOR="green" size="7">大きな緑の文字</FONT>のように、両方同時に指定することも出来ます。
    詳しくは<FONT> を見てください。
  • 色の名前は、色の名前を見てください。
  • 画像を貼り付けるには、例えば、http://www.okayama-u.ac.jp/jp/img/topss_01.jpgを皆さんのホームページに貼るには
    <IMG SRC="http://www.okayama-u.ac.jp/jp/img/topss_01.jpg">と書きます。画像のアドレスは、画像にマウスを合わせて右クリックして「プロパティ」を見ます。デジカメの画像をW:ドライブに保存して使うことも出来ます。
    詳しくは <IMG>を見てください。
  • 他のページへのリンクを張るには、例えば、岡山大学のホームページhttp://www.okayama-u.ac.jp/にリンクを張るには
    <A HREF="http://www.okayama-u.ac.jp/">岡山大学</A>と書きます。
    詳しくは<A>を見てください。

1 件のコメント:

笛田薫 さんのコメント...

This is very nice blog.ってあんた、日本語のブログを読めるのなら日本語でコメント書いてくださいよ。
ていうか皆さん、こういう怪しい投稿のリンクはクリックするとどんな仕掛けがあるか分からないのでクリックしないで下さい。怪しい投稿の見本として削除しないで置きます。