作ったページは、学内なら他の人にも見せることが出来ます。
ホームページの原稿は、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というファイル名で保存してから、Firefoxで
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>を見てください。
| A | B | C |
|---|---|---|
| 2 | 4 | 4 |
| 2 | -1 | -6 |
| 2 | 3 | -2 |
| Sheet1 | ||
|
のようにレイアウトも、実は表を使って
|
そこで表の作り方を勉強しましょう。秀丸エディタで
<HTML>
<HEAD>
<TITLE>
表の練習
</TITLE>
</HEAD>
<BODY>
ここに表を書きます。
</BODY>
</HTML>
という内容のファイルを作って、index2.htmというファイル名で保存して下さい。そしてFirefoxで
http://www.edu.cc.okayama-u.ac.jp/~自分のユーザー名/index2.htm
を見てください。ここに表を書いていきましょう。
最も基本的な表の形は
<TABLE>
<TBODY>
<TR><TD>左上 </TD><TD>右上 </TD></TR>
<TR><TD>左下 </TD><TD>右下 </TD></TR>
</TBODY>
</TABLE>
です。この通りに入力すると
| 左上 | 右上 |
| 左下 | 右下 |
HTMLでは<命令>と</命令>がペアで使われるのでしたよね。
表では<TABLE>と</TABLE>がペアとなって、表の始まり、表の終わり、を表します。
表では<TBODY>と</TBODY>がペアとなって、表の本文の始まり、表の本文の終わり、を表します。
そして表の中では<TR>と</TR>がペアとなって、行の始まり、行の終わり、を表します。
最後に、各行の中では<TD>と</TD>がペアとなって、セルの始まり、セルの終わり、を表します。
練習問題:次の表を作ってください。
| 左上 | 中上 | 右上 |
| 左中 | 中中 | 右中 |
| 左下 | 中下 | 右下 |
<TABLE>を<TABLE border="1">に書き換えると、表の境界線が表示されます。
表に関するいくつかの補足
- 最初の表のsheet1のように複数のセルを横に繋げて表示するには<TD colspan="3">中身</TD>のように書きます。
- 縦に繋げて表示するには<TD rowspan="2">中身</TD>のように書きます。
- セルの中央に文字を表示するには<TD>を<TD align=center>に、 右に表示するには<TD>を<TD align=right>に書き直します。
- セルの上のほうに表示するには<TD valign=top>, 中央なら<TD valign=middle>, 下のほうなら<TD valign=bottom>です。
- bgcolor="色の名前"という方法での色づけは、表の塗りつぶしにも使えます。<TABLE bgcolor="red">とか<TR bgcolor="green">とか<TD bgcolor="blue">を試してみてください。どこに色がつきましたか?
ホームページ作りに関してはまだまだ沢山の項目があります。興味がある人は解説サイトなどを見てください。但し、沢山の項目を駆使するより、配置、配色を工夫する方が見やすいページになります。
ホームページ作りに関する課題:
http://www.edu.cc.okayama-u.ac.jp/自分のユーザー名/
という形で学内から見ることが出来るホームページを作ってください。条件は
- 2つ以上のファイルを作って、相互にリンクを貼って行き来できるようにする。
- 他のサイト(友達、僕、岡山大学、外部などどこでもいいです)へのリンクも作る。
- 画像を貼る
- 表を作る。境界線は表示してもしなくてもいいです。
- 色をつける。文字の色でも背景の色でもいいです。
来週1月29日と再来週2月5日は試験期間中ですので通常の講義ではなく補講として、新しい内容はせずにHTMLのレポートやそれ以前の内容に関する質問の時間にします。
0 件のコメント:
コメントを投稿