えっと、先週に引き続き、Serverの準備が整っていません。ごめんなさい。来週(1)こそは..
前回に引き続き、HTML (Hypertext Markup Language)ファイルの作成方法に関して学びます(2)。
実際は、HTMLではなく、XHTMLです。
日本語の参考資料XHTMLとは何だろうかなども、参照してみましょう。
でも、まあ、はっきり言って、今日の範囲では、どちらでも似たようなものです..。
(後に、説明するように..) HTMLの最も重要な機能は、「リンク機能」です。これを利用するには、いくつかのHTMLファイルを作成する必要があるので、まずは、作業場として、フォルダーを作成しましょう。
ディスクトップ上に「hp」というフォルダを作成することにします。
作成方法は、ディスクトップで、右クリックし、
[新規作成(W)]→[フォルダ(F)]
を選べば、「新しいフォルダ」という名前のフォルダがディスクトップに作成されるので、これの名前を変更(そのフォルダ上で右クリックして、[名前の変更(M)]を選ぶと、名前の部分がハイライトされるのでその状態で、新しい名前を指定する。ここではhpとする)します。
これから、作成するHTMLファイルは、このhpフォルダの中に作成することにしましょう。
とりあえず、「メモ張」を起動(3)しましょう。
[スタート]→[すべてのプログラム(P)]→[アクセサリィ]→[メモ張]
そして、以下の内容を書いてみましょう(4)。
<?xml version="1.0" encoding="Shift_JIS" standalone="no"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<title>○○のホームページ</title>
<meta http-equiv="Content-type"
content='text/html; charset="Shift_JIS"' />
</head>
<body>
<p>こんにちは、○○のホームページへようこそ。</p>
</body>
</html>
入力が終わったら、保存です。
まず、
[ファイル(F)]→[名前を付けて保存(A)]→[ディスクトップ]→[hp]
とします。この状態では、テキストファイルしか保存できませんので、ここで、[ファイルの種類]を「すべてのファイル」に変更します。また、ファイル名は、「hp.html」とします。ここまで、できたら、[保存(S)]をクリックしましょう。
[アクセサリィ]の中に「メモ張」が見つからない人は、
[スタート]→[ファイル名を指定して実行(R)]
を指定し更に、「notepad」とキーボードから入力して、[OK]を押してみてください。
それでもだめなら、先生に聞こう...。
ちゃんと、保存ができるいるかどうかを、確認するために、ie(5)を利用して、表示させてみます。
[ディスクトップ]→[hp]→[hp]
として、
こんにちは、○○のホームページへようこそ。
が表示できればOkey。
再び「メモ張」に戻って、「○○」の部分を自分の名前に変更してみましょう。また、他のメッセージも入れて見ましょう。
変更を加えたら、[ファイル(F)]→[上書き保存(S)]としたあとに、ieに戻り、[更新]ボタンをクリックし、変更した内容が反映されることに注意しましょう。
一旦、「メモ張」を閉じてください。
その後にieで、右ボタンを押し、[ソースの表示(V)]を選ぶと、自動的にメモ張が開き、そのページに対応したHTMLファイルの内容が表示されます(6)。
ついでですので、「</body>」の上に以下の行を追加(7)してみましょう。
<p> 私の情報は以下のようになっています。 </p> <dl> <dt>連絡先</dt> <dd> g13xxxx@edu.cst.nihon-u.ac.jp </dd> <dt>ニックネーム</dt> <dd>××○○</dd> <dt>趣味</dt> <dd>○○すること</dd> </dl>
これで、「他の人のページを真似る」方法が分かりましたね。
繰り返すようですが、「内容」を真似のはよくありませんが、「表現技術」は、Copyして、全く問題ありません。良い技術は、どんどん真似して自分の身に付けましょう。
このようなことを書くと、すぐに、「住所」や「電話番号」、「生年月日」等を入力する人がいます。もちろん、このような積極的な振る舞いは、大変結構なのですが、将来、この情報をInternetに公開するとすることを考えているのであれば、これは問題です。
個人の情報を安易に他人に知らせるのは、後で、トラブルに巻き込まれる原因になります。
WWWを利用して情報を公開してよいのは、せいぜい、自分の名前と(携帯ではない) e-mail address程度です。
特に女性の方は、「名」の方(性別が分かるもの.. )も控えた方が無難です。
HTMLファイル中で、特徴的なのは、「<」と「>」で囲まれている部分です。この部分をTAG (タグ)と呼びます。
TAGとその他の部分(地の文)の大きな違いは、メモ張と、ieの表示を比較すると分かると思いますが、だいたい、次の通りです。
誤解を恐れずに、言い切るならば、地の文は内容を意味し、TAGは表現を意味するといって良いでしょう。
HTMLファイルを作成することは、そんなに大変ではありません。はっきりいって、全部地の文にしてしまえば(表現は貧弱かもしれませんが.. )それでもOkeyなのです。
ただ、見栄えを良くするなら、色々なTAGがあると良いだろうということです。
どんなTAGがあり、その効果がどのような形になるかは、ホームページを作ろう !!等を参考にしてください。
HTMLにおいて、最も重要な機能は、Linkです。Linkは、他のPageへの参照(行き先)を、自分のPageに反映するもので、これによって、複数のPageを有機的に結びつけることが可能になります。
更に、</dl>の上に次の行を追加してみましょう。
<dt>検索エンジン</dt><dd><a href="http://www.google.co.jp">Google</a></dd>
これでgoogleがいつでも利用できます。
YahooへのLinkも追加してみましょう。
一つのHTMLファイルは、一枚のページ( ieで、一度に見えるものです)になります。
しかし、一枚のページにたくさんの情報を詰め込むのは考え物です。そこで、複数のHTMLファイルを作成します。
まず、hp.htmlと同様にして、comp1023.htmlを作成してみましょう。
<?xml version="1.0" encoding="Shift_JIS" standalone="no"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<title>10/23 にコンピュータ概論で学んだこと</title>
<meta http-equiv="Content-type"
content='text/html; charset="Shift_JIS"' />
</head>
<body>
<dl>
<dt>XHTML について</dt>
<dd> ... </dd>
<dt> ホームページについて</dt>
<dd> ... </dd>
<dt> この日の資料は </dt>
<dd>
<a href="http://edu-gw2.math.cst.nihon-u.ac.jp/~kurino/comp/20231023/20231023.html">
2023/10/23 の資料
</a>
</dd>
</dl>
</body>
</html>
そして、hp.htmlには、googleへのLink上に、次のLinkを追加してみてください。
<dt>ノートのページ</dt><dd><a href="comp1023">コンピュータ概論(10/23)</a></dd>
ホームページを作成するとなる身構える人がいますが、そんなに難しくはありません。もう一度、以下の点を考慮にいれて、考えてみてください。
今回もありません。