ホームページ作成（初級編）

とにかく作ってみましょう

  1. ホームディレクトリにpublic_htmlという名前のディレクトリを作成する．
  2. エディタ(gEditなど)を使って，以下のファイルを作成し，作成したフォルダpublic_htmlの中にindex.htmlというファイル名で保存する． 
    <HTML>
<HEAD>
<TITLE>Welcome to My Homepage!</TITLE>
</HEAD>
<BODY>

私のホームページにようこそ！！
今ホームページを作っています．
更新するまで待っていてくださいね．

</BODY>
</HTML>
  3. メインメニューから「センターメニュー」→「環境設定」→ 「自分のWebページを公開」を実行する．
    (注)この作業は新しいファイルをpublic_htmlに作るたびに 実行すること!
  4. Netscapeで，
    http://webserver/~ログイン名/
    をオープンすると このように表示されるはずです．

ファイルindex.htmlの意味は？

index.html は，索引(index)を書いた HTML ファイルという意味です．通常，
http://webserver/~ie-014nm/
というように， HTMLファイルの置き場所を指定するURL(Uniform Resource Locator) がディレクトリ名で終わり，特にファイルの名前を指定されていない場合には，このindex.htmlが読み込まれるようになっています．なお，HTMLで書かれたファイルは，通常，.htmlという拡張子をつけることになっています．
注意: 現在のところ，サイバーメディアセンターで作った各自のホームページはセンターの外から参照することができません．

HTMLタグの基本

HTML は，通常の文章の中に < >で囲まれたコマンド(タグ)を埋め込むことによって，文章の構造を指定したり，画像データを貼り付けたり，他の情報の参照を指示したり(ハイパーリンク)することができます．
タグは，<タグ名>という形で記述されます．ほとんどのタグは対になっており，タグ名の頭に/を付けた</タグ名>を終わりを表すタグとし，通常は，
<タグ名( オプション=…)>

タグによって修飾する内容

</タグ名>
といった形で使用します．オプションはタグに対しての情報を指定するもので，開始のタグの中で必要に応じて指定します．

お約束のタグ

HTMLの基本的な構成は， 
<HTML>

<HEAD>
   <TITLE> タイトル </TITLE>
</HEAD>

<BODY>
     本体
</BODY>

</HTML>
となり，上の4種類のタグはいわゆるお約束のタグです．

  1. <HTML>〜</HTML>はこのファイルがHTMLで記述されていることを表すものです．HTMLで書かれたファイルは，ヘッダ部とボディ部の２つに分けられます．

  2. ヘッダ部は<HEAD> 〜 </HEAD>で囲み，そのHTMLファイルのタイトルなどを記述します．

  3. <TITLE> 〜 </TITLE> タグで囲まれた文字列はこのHTMLファイルのタイトルとして扱われます．

  4. <BODY> 〜 </BODY>で囲まれた部分はボディ部と呼ばれ，HTMLファイルの本文が記述されます．

改行<BR>と段落<P>

上のindex.htmlの例でも見たように，HTMLでは改行文字および空白文字は無視されます．陽に改行を挿入するにはタグ <BR>で指定します．また，段落をあらわすタグ<P>で空行を挿入することができます．
先ほどのindex.htmlに適当に挿入してみましょう．本文を適当に自分の好きなように編集してみてください．編集後は， Netscapeで「再読み込み」ボタンを押してください．
<HTML>
<HEAD>
<TITLE>Welcome to My Homepage!</TITLE>
</HEAD>
<BODY>

私のホームページにようこそ！！<BR>
今ホームページを作っています．<BR>
更新するまで待っていてくださいね．<BR>
<P>
masa-n@ecs.cmc.osaka-u.ac.jp
</BODY>
</HTML>
このように 表示されるはずです．

見出し<H1>と区切り線<HR>

<H1> 〜 </H1>で囲まれた文字列は，見出しとして表示されます． <H1>は一番大きな見出しを表しますが， <H1>から<H6> までの6段階の見出しを利用することができます．
また， <HR> で，水平の区切り線を入れることができます．自分のホームページの見出しをつけてみましょう．編集後は， Netscapeで「再読み込み」ボタンを押してください．
<HTML>
<HEAD>
<TITLE>Welcome to My Homepage!</TITLE>
</HEAD>
<BODY>
<H1>中村のホームページにようこそ</H1>
<HR>

<H2>今日のひとこと</H2>

私のホームページにようこそ！！<BR>
今ホームページを作っています．<BR>
更新するまで待っていてくださいね．<BR>

<H2>新着情報</H2>

<H2>自己紹介</H2>

<P>
<HR>
masa-n@ecs.cmc.osaka-u.ac.jp
</BODY>
</HTML>
このように 表示されるはずです．

背景と文字の色

<BODY> タグのオプションを指定することで，ホームページの背景と文字の色の指定ができます．文字の色はtext，背景はbgcolorで指定します．たとえば，背景を白，文字を黒にしたいときには <BODY text="black" bgcolor="white"> と指定します．
色の指定は，色名で指定（下のテーブル参照）するか，"#rrggbb" : 赤(r)，緑(g)，青(b)の各色成分を，それぞれ16進数2桁で定義することができます(詳しくは次回)．
aqua 水 fuchsia 紅紫 maroon 栗 red 赤 gold ゴールド
black 黒 gray グレー navy ネイビー silver シルバー teal 雁
blue 青 green 緑 olive オリーブ yellow 黄色 greenyellow きみどり
brown ブラウン lime ライム purple 紫 white 白 orange オレンジ
ホームページ内の特定の文字の色だけを変更するためには，フォントタグ <FONT color="色"> 文字列 </FONT> を用いて指定します
例：これは<FONT color="brown">茶</FONT>です．
自分のホームページに好みの色をつけてみましょう．また，いままで習ったタグを利用して好きなように編集してみましょう．
<HTML>
<HEAD>
<TITLE>Welcome to My Homepage!</TITLE>
</HEAD>
<BODY text="black" bgcolor="white">
<H1>中村のホームページにようこそ</H1>
<HR>

<H2><FONT color="brown">今日のひとこと</FONT></H2>

私のホームページにようこそ！！<BR>
今ホームページを作っています．<BR>
更新するまで待っていてくださいね．<BR>

<H2><FONT color="brown">新着情報</FONT></H2>
2000年6月12日 <BR>
情報活用基礎で初めてのホームページを作りました．<BR>
今日はいい天気でした．<BR>

<H2><FONT color="brown">自己紹介</FONT></H2>
中村匡秀 (Masahide Nakamura)<BR>
<P>
1972年兵庫県生まれ<BR>
現在サイバーメディアセンター助手<BR>
<P>

<P>
<HR>
masa-n@ecs.cmc.osaka-u.ac.jp
</BODY>
</HTML>
このように 表示されるはずです．

リンク

HTML の最大の特徴は「文書の相互参照が行える」ということです．ここでは，他のホームページへのリンク(ハイパーテキストリンク) を作ってみましょう．
これにはアンカータグ<A>〜</A> を使います．オプション HREFとあわせて次のように覚えてしまいましょう．
<A HREF="他のホームページのURL"> リンク先を表す文字列</A>
例えば，上の「現在サイバーメディアセンター助手」の"サイバーメディアセンター"のところに，センターのホームページ (http://webserber/)をリンクしたい場合には，
現在 <A HREF="http://webserver/">サイバーメディアセンター </A> 助手
と書くと，以下のようになります．
現在 サイバーメディアセンター 助手
自分のディレクトリ(public_html)にあるファイル (例えば，picture1.jpg)へのリンク(内部リンク)は
<A HREF="picture1.jpg">僕の絵</A> です．
等とすることができます(どんなファイルでも良い． ただし，public_htmlに新たなファイルを追加したときは，「自分のWebページの公開」を忘れないこと ）．
先ほどのHTMLに面白いサイトという項目を追加してみました．これを参考にして自分の好きなサイト(友達のページ等) のリンクを作ってみましょう．
<HTML>
<HEAD>
<TITLE>Welcome to My Homepage!</TITLE>
</HEAD>
<BODY text="black" bgcolor="white">
<H1>中村のホームページにようこそ</H1>
<HR>

<H2><FONT color="brown">今日のひとこと</FONT></H2>

私のホームページにようこそ！！<BR>
今ホームページを作っています．<BR>
更新するまで待っていてくださいね．<BR>

<H2><FONT color="brown">新着情報</FONT></H2>
2000年6月12日 <BR>
情報活用基礎で初めてのホームページを作りました．<BR>
今日はいい天気でした．<BR>

<H2><FONT color="brown">自己紹介</FONT></H2>
中村匡秀 (Masahide Nakamura)<BR>
<P>
1972年兵庫県生まれ<BR>
現在 <A HREF="http://webserver/">サイバーメディアセンター</A> 助手<BR>
<P>

<H2><FONT color="brown">面白いサイト</FONT></H2>
<A HREF="http://webserver/~naka/">中西先生のページ </A>
<P>
<A HREF="http://www.asahi.com/">朝日新聞</A>
<P>
<A HREF="http://www.jra.go.jp/">JRA中央競馬</A>
<P>

<P>
<HR>
masa-n@ecs.cmc.osaka-u.ac.jp
</BODY>
</HTML>
このように 表示されるはずです．

箇条書き（余力のある人向け）

余力のある人は，箇条書きに挑戦してみましょう．箇条書きは，重要なポイントを端的にまとめて，羅列するときに有効です．下のソースを自分のHTMLの適当な場所に挿入してみましょう．
■ 箇条書き(ノーマル) <UL> <LI> 項目 .... </UL>
HTMLの箇条書きには次の3点がある．
<UL>
  <LI> ノーマル
  <LI> 番号付
  <LI> 表題付
</UL>
■ 箇条書き(番号付) <OL> <LI> 項目.... </OL>
2001年サッカー・コンフェデレーション杯の順位は以下のようになった．
<OL>
  <LI> フランス
  <LI> 日本
　<LI> オーストラリア
</OL>
■ 箇条書き(表題付) <DL> <DT> 表題 <DD> 説明 .... </DL>
ファイルの拡張子について
<DL>
  <DT> csv
     <DD> Comma Separated Valueの略．コンマ区切りに値を並べたテキストファイル．
          表計算のデータ交換に使われることが多い．
  <DT> aw
     <DD> Applix Word 形式．Applixワードのデータ保存形式．
  <DT> ag
     <DD> Applix Graphics形式．Applixグラフィックスのデータ保存形式．Applix
          プレゼンテーションにも用いられる．
  <DT> as
     <DD> Applix Spreadsheet形式．Applixスプレッドシートのデータ保存形式．
</DL>

最後に

余った時間で自分のホームページを整形し，今までの復習をしてみましょう．
HTML上達のためには，他のホームページのHTMLソースを見てみるのもいいかもしれません（右クリック→「ソースの表示」）．ただし，ページによっては，文字コードの違いのため，文字化けが起こる可能性があります．

Copyright to Masahide Nakamura, Cybermedia Center, Osaka University
masa-n@cmc.osaka-u.ac.jp
http://webserver/~masa-n/
(Last Updated on 2001-06-15 16:20:50)