ホームページの作成


  1. 目的
    今回はインターネットで最もポピュラーやツールであるホームページの作成と公開の仕方を紹介します。
  2. 簡単なホームページの書き方
    最初に最も簡単なhtmlの記述例を示します。この例は、ページのタイトルを指定し(TITLE文)、大きな文字で"今日は"を表示します。
    1. HTMLとは
      　HTML（Hyper Text Markup Language)は、ホームページの書式を定めたものです。一般のワープロでは、文章は見えますが、文字の大きさやレイアウト、画像の挿入の方法などは隠れて見えません。これらの文字や画像等の表示方法は各種のワープロで異なり、世界共通の規格になっていません。
      　HTMLはこの表示方法を、＜タグ＞と呼ばれる文字で表現し、表示する文字と同様に画面に見える形式で表現します。このHTML形式で表現されたものを、ブラウザで見ると＜タグ＞は隠れ、＜タグ＞で指定されたレイアウトで文字や画像が表現されます。
      1. 一行表示するhtml(hello.htm）
        <HTML>
        <HEAD>
        <TITLE> HomePage</TITLE>
        </HEAD>
        <BODY>
        <H2>今日は</H2>
        </BODY>
        </HTML>
      2. タグで機能を拡張できる
        htmlでは<..>を使って、文字以外の意味を指示します。この<..>をタグといいます。タグには単独で意味を持つものと、<..>と</..>が対になって利用されるものがあります。タグはHEADとかBODYといったキーワードでその意味を表しますが、キーワードは半角英字です。小文字でもかまいませんが、通常大文字で表記しますので、ここでも大文字で示します。
    2. htmlの構成
      ページは<HTML>で始まり、</HTML>で終わります。この中にHEAD部とBODY部を記述します。
      1. HEAD部は
        HEAD部は<HEAD>と</HEAD>で挟んで書きます。この<..>をタグといいます。HEAD部では　<TITLE>　を指定します。<TITLE>は表示されるページのウインドウのタイトルになります。タイトルは通常英字とします。
      2. BODY部は
        BODY部は<BODY>と</BODY>で囲んで書きます。ここに書くタグ外の文字は、そのままページの文字として表示されますが、大きな文字の表題などを書くには、<H2>と</H2>で囲みます。Hの次の数字が文字の大きさを指示します。H1が一番大きな文字でH6が一番小さな文字です。
    3. 簡単ホームページをつくろう
      1. メモ帳で作成する
        メモ帳はwinndowsのOSに組み込まれているテキストエディタです。スタートメニュー＞アクセサリ　から利用できます。htmは文字のみのファイルなので、メモ帳で作成できます。
      2. ファイルを作成する（hello.htm)
        まず先の例のhello.htmの内容をエディタで作成し、ファイルに保存します。ァイル名の最後を .htm　としてください。
        1. 計算機で大文字と小文字の扱いが異なる
          Windowsではファイル名は小文字で入力しても大文字として扱われます。ただし、多くのプロバイダのコンピュータでは大文字と小文字を区別しますから、ファイル名はすべて小文字で統一しましょう。また、Windowsではファイル名の拡張子は３文字ですからファイル名はhello.htmとします。
          また、タグの文字（HEADやBODY）は大文字でも小文字でもかまいません。多くの参考書は大文字で書かれていますから、ここでも、大文字とします。
        2. 改行をするには
          行を改めるには、行の最後に<BR>をつけます。
        3. ファイルの保存
          メモ帳で、ファイルメニューから"名前を付けて保存"を選択します。次のようなファイル保存ウインドウが開きます。
          *************
          ウインドウの上の「保存する場所」が"H:" でなければ、横の三角矢印をクリックし、"H:"を選択します。H:　以外には保存しないで下さい。
          　ファイル名をhello.htmとします。
      3. htmlファイルを見よう
        1. ローカル処理で見る
          IE（InternerExplorer)を立ち上げ、ファルメニューからopenFileを選択します。ファイルを選択するウインドウが現れますから、hello.htmを選択します。
        2. 再実行（更新）が必要
          hello.htmを訂正して再度表示するには、まず、hello.htmファイルを修正後保存し、次にIEの"更新"ボタンをクリックします。"更新"はファイルを読み直し、表示をしなおします。
          1. 実行中のウインドウ

      4. 見えましたか？
        homePageのタイトルのウインドウが現れ、
        "今日は"
        と表示されたら、成功です。
    4. 箇条書き
      様式を伴う書き方として、まず、<UL>(UL:Unorderd List)を紹介します。箇条書きする全体を、<UL>と</UL>で囲みます。各項目は<LI>(LI:List)を先頭に記述します。箇条書きにすると、全体が段付けされ、行の先頭にマークがつきます。L1（数字の1）と間違えないよう注意下さい。
      1. 例　ulist.htm
        <HTML>
        <HEAD>
        <TITLE>list</TITLE>
        </HEAD>
        <BODY>
        <H1>今日は<BR>
        太郎のページにようこそ</H1>
        <H4>
        <UL>
        <LI>早寝早起き
        <LI>朝食を食べる
        <LI>講義は静かに聴く
        </UL>
        </H4>
        </BODY>
        </HTML>
        1. 説明
          まず、先頭の大見出しに<BR>を入れて、改行しています。以下の箇条書きは<H4>の文字サイズとします。<UL>と</UL>の間は箇条書きをします。<LI>で始まる項目が、段付けされて表示されます。例では、htmlの記述を段付けして書いていますが、これは読みやすくするためです。
      2. 箇条書きページの作成
        まず、上のhtml記述をエディタで入力し、ulist.htmの名前で保存します。次に、ウインドウをNetscapeに切り替え、FileメニューのopenFileでulist.htmを選択します。次のように表示されたら成功です。
        1. 表示結果

      3. 多重の箇条書き
        <UL>の項目をさらに<UL>で多重構造の箇条書きができます。
        例
        <UL>
        <LI>早寝早起き
        <UL>
        <LI>12時前に寝る
        <LI>６時に起きる
        </UL>
        <LI>朝食を食べる
        <LI>講義は静かに聴く
        </UL>
      4. 先頭の記号の変更
        1. TYPE指定
          <UL>タグにTYPEを指定することにより、リストの先頭の記号を白丸（circle）や正方形(square)に変更することができます。
          　<UL　TYPE=square>
        2. OL
          ULの替わりにOLを利用しますと、リストの番号付けができます。TYPEを付記すると、パーマ数字や英字を利用することもできます。
          1. 例
            <OL　TYPE="I">..</OL>　　大文字ローマ数字で番号
            その他のTYPE　i：小文字もローマ数字、A:大文字英字、a：小文字英字
    5. 画像をホームページに組み込もう
      1. 画像ファイルの組み込み
        画像をページに張り込むには、画像ファイルを次の形式で参照します。
        　<IMG SRC = "ファイル名">
        ファイル名を　"　で囲むのを忘れないで下さい。IMGはimage、SRCはsourceの略です。
        1. 例　image.htm
          <HTML>
          <HEAD>
          <TITLE>Image Sample</TITLE>
          </HEAD>
          <BODY>
          <H1>今日は</H1>
          <IMG SRC = "img.gif">
          </BODY>
          </HTML>
        2. 説明
          "今日は"に続いて　<IMG>タグでimg.gifファイルの絵を組み込みます。ファイル名を　"　で囲って下さい。
        3. 表示画面

        4. img.gifファイルが見つからない場合

      2. 組み込みの指定
        1. 画像への文字の回り込み
          　文字と画像（<IMG SRC=..>)が混在したとき、画像は一つの大きな文字として扱われます。画像の横に複数行の文字を表示するには、画像を右または左に配置する必要があります。左に配置して、文字の回り込みをするには
          　<IMG SRC = "..." ALIGN=left>
          回り込みを止めるには、
          　<BR CLEAR = left>
          とします。
          1. 例
            <HTML>
            <HEAD>
            <TITLE>image</TITLE>
            </HEAD>
            <H2>今日は</H2>
            <IMG SRC = "kusi.gif" ALIGN=left>今日も
            <BR>天気だ<BR>ビールがうまい。
            <BR CLEAR =left>明日も天気か
            </BODY>
            </HTML>
            1. 画像と文字の回り込み

        2. 画像の大きさ
          以下のように画像の大きさを指定することができます。
          　<IMAGE SOURCE= "kusi.gif" WIDTH="200" HEIGHT="100">
          WIDTHは画像の幅、HEIGHTは画像の高さをピクセル（画素）単位で指定します。画像のサイズを指定すると、画像を読み込む前に文字のみでページが完成するため、素早い表示ができます。
          ただし、画像を取り込む時間は変化しませんから、大きな画像を小さく表示するために指定するのは好ましくありません。
      3. 背景画像の指定
        <BODY>タグで背景となる画像を指定することができます。
        <BODY BACKGROUND = "画像ファイル">
        画像ファイルがウインドウより小さい場合、タイルのように敷き詰められて表示されます。
      4. 画像ファイルの取得
        ホームページの画像は、その画像の上で右クリックすると、画像を保存するメニューが現れます。
    6. 表を組み込もう
      ワープロでも罫線で囲んだ表を作成するのはめんどうな作業です。htmlでは、少し制限がありますが、表の内容を書けば、自動的に罫線をつけた表を作成してくれます。ワープロの表と異なるのは、表を表示する幅を画面のサイズに合わせて自動調節する機能があることです。また、表に中に画像やリンク（後述）を指定することができます。
      1. 基本構造
        まず、全体を
        　<TABLE BORDER>と</TABLE>
        で囲みます。表は、<TR>と</TR>で囲んだ行単位に記述します。つまり、
        　<TABLE>
        <TR>...</TR>

        <TR>...</TR>
        </TABLE>
        の形式です。さらに、各行の項目は<TD>と</TD>で囲みます。一つの項目を２行で折り返して表示するには、途中で<BR>を入れます。<TABLE BORDER>でBORDERを省略すると罫線が表示されません。
      2. 例（table.htm)
        <html>
        <HEAD>
        <TITLE>table</TITLE>
        </HEAD>
        <BODY>
        <H2>表の例</H2>
        <TABLE BORDER>
        <TR><TD>伊藤</TD><TD>いとう</TD><TD>豊田</TD></TR>
        <TR><TD>永田</TD><TD>ながた</TD><TD>桑名</TD></TR>
        <TR><TD>宮間</TD><TD>みやま</TD><TD>伊勢</TD></TR>
        <TR><TD>中江</TD><TD>なかえ</TD><TD>伊賀</TD></TR>
        </TABLE>
        </BODY>
        </html>
        1. 表の表示

        2. メモ
          1行入力したら、それをコピー＆貼り付けをして次の行に利用しましょう。
      3. 表に関するその他の設定
        1. 外枠の太さ、表の幅と高さ
          <TABLE>タグに表の幅と高さを指定することができます。
          　<TABLE BORDER=b WIDTH=w HEIGHT=h>
          ..</TABLE>
          bは表の枠線の太さ、wは表の幅、hは表の高さをピクセル（画素）単位で指定します。bを0にすると、枠線を消すことができます。w,hが必要量以下の場合無視されます。borderで大きな値（５以上）を指定すると表に立体感がでますから、装飾にも利用できます。w,hの数値に%を付けると、全体の割合で指定できます。
        2. 表のタイトル（キャプション）
          <table>...</table>の間のどこでも指定でき、表のタイトルを指定します。
          <CAPTION>表題</CAPTION>
        3. 表の要素の位置
          <TR>,<TD>,<TH>で、表の位置を指定できます。代表的な位置ぞろえは、左(left)、中央(middle)、右(right)で次のように指定します。
          <TR ALIGN="right"><TD>..</TD><TD>..</TD></TR>
        4. 背景色
          <TD>の中で、BGCOLORで背景の色が設定できます。特定の項目を強調する場合に便利です。
      4. 表の利用
        1. 表の項目は自由
          普通のワープロと違い、表の項目として画像やリンクなど、各種のデータが入れられます。工夫をすると、いろんな応用が可能です。
        2. 画像の表
          表の項目として　<img src=...　>　で画像を指定することができます。この機能を利用すると、画像を横に並べることができます。
        3. 文字の2段組
          1行2列の表を利用すると、文字を2段で表示して折り返して表示できます。罫線が邪魔なら、太さを0に設定します。
    7. 接続（リンク）の方法
      1. 目的
        リンクは、特定の単語や画像から、関連するページに移動（接続）する機能です。この移動には、元のページに戻る移動も含まれます。
      2. 設定
        次のように接続するHTMファイルを指定します。
        　<A HREF = "接続するHTMファイル">接続する言葉</A>
        ブラウザはこのHREF(Hyper REFerence)に対し、まず、"接続する言葉"　を異なる色で表示し下線をつけます。また、この言葉がクリックされると、"接続するhtmファイル"の内容が新しいページとして表示します。
      3. ページの表示
        以下の二つのファイルを作成し、まず、href.htmをブラウザで表示します。色が変わって表示されている"今月の課題"をマウスでクリックします。これで、list.htmのページが表示されれば成功です。元のページに戻るには、back（戻る）ボタンをマウスでクリックします。
        1. href.htm
          <HEAD>
          <TITLE>HomePage</TITLE>
          </HEAD>
          <BODY>
          <H1>今日は</H1>
          <A HREF = "list.htm">今月の課題</A>
          </BODY>
        2. 実行画面

      4. フォルダにまたがる接続
        1. フォルダの利用
          フォルダはファイルを保存する箱に相当します。複数のページを作成する場合、各ページを異なるフォルダに入れておくと、管理が楽になります。
          1. フォルダの作成
            　フォルダを作成するには、ファイル表示ウインドウを利用し、ファイルメニューから　新規作成　を選び、"フォルダ"を選択します。作成されたフォルダの名前は　「新しいフォルダ」　となり、フォルダ名が編集可能状態になっていますから、適当な名前に変更します。あるフォルダAの内部に作成されたフォルダBをAの子供のフォルダと言います。また、AはBの親フォルダになります。
          2. フォルダの中のファイルの参照
            フォルダAの中に子供のフォルダBがあるものとします。現在、フォルダAの中のhello.htmを表示しているものとして、hello.htmからフォルダBの中のindex.htmを参照するには
            　B/index.htm
            とします。フォルダBのindex.htmファイルといった意味になります。
            1. フォルダ作業\Aの中のフォルダB

            2. 例
              キーワード"カナダ旅行"で子供のフォルダtrvの内部のcanada.htmを参照します。
              <A HREF = "trv/canada.htm">カナダ旅行</A>
          3. 親のフォルダの参照
            親のフォルダは一意に定まりますから名前で指示する必要はありません。親のフォルダのファイルを参照するには
            　../hello.htm
            のようにします。".."が親のフォルダを意味します。
            1. 注意
              ウインドウシステムではフォルダの中のファイルは　B\index.htm　のように \ で区切って表示します。
            2. ディレクトリ
              システムが異なると、フォルダのことをディレクトリと呼びます。
        2. 他のサーバーのページへの接続
          他のサーバーのホームページを参照するには
          　<A HREF="http://www.ccad.sccs.chukyo-u.ac.jp/~mito ">伊藤　のホームページ</A>
          のように、http://をつけたURLで指定します。HREFの指定に　http:　があると、指定されたwwwサーバーにhtmlファイルを取りにいきます。
    8. 演習
      1. 課題
        次の内容のページを作成して下さい
        ページのhtmlファイルと、ページのハードコピーを提出して下さい。
        1. 内容
          ホームページの特徴　　//題目、大きな字で太字にする
          　箇条書きで特徴を列挙する　//リストを利用する
          お勧めのページ　
          　紹介したいページを紹介する
          　そのページへのリンクをつける
          　そのページの画像を紹介する
  3. ホームページの公開
    1. ネットワーク接続
      今回はDHCPで接続します。各PCはハブ経由でノートＰＣのサーバーに接続します。サーバーのIPは150.42.41.135です。pingで接続を確認して下さい。
    2. サーバーにログインする
      1. telnet
        telnetで接続し、web用に公開するpublic_htmlディレクトリを作成します。このディレクトリの名前は固定で変更するとwebサーバーがディレクトリを認識できません。
      2. コマンド
        1. 起動、接続
          telnetを起動し、IPを指定して接続します。以下、下線部が実際に入力する文字です。
          \>telnet ;起動
          ;Microsoft Telnet クライアントへようこそ
          ;Microsoft Telnet>open 150.42.42.135　　；接続する
          ;Kondara MNU/Linux 2000 (Sushi)　　　　　；サーバーのOSの名前
          ;Kernel 2.2.16-5k on an i686
        2. ログイン
          ユーザ名はグループ1から順にnwg1、nwg2、..、パスワードはchu1ng1、chu2ng2、..です。ここではグループ１の例を示します。
          login:nwg1　　　　　　　；ユーザ名（グループで異なる）
          Password:chu1ng1　　；パスワード（グループで異なる）
          ;Last login: Sat Nov 17 09:57:04 from coffee
          [nwg0@coffee2 nwg0]$　　　　；ここからLinuxコマンド入力
        3. ホームディレクトリの確認とアクセス許可
          1. ディレクトリの構成
            サーバーでは、homeを利用者全体のディレクトリとし、その配下に各ユーザnwg1のホームディレクトリ、その配下にweb用のpublic_htmlをおきます。
            　/home/nwg1/public_html/
          2. ディレクトリの作成
            自分のディレクトリnwg1にホームページ用のディレクトリを置きます。このためには、他人（読む人）に対しディレクトリのアクセス許可を出す必要がある。ここでは、グループ1を例にコマンドを例示する。各グループはグループの番号のディレクトリを指定すること。
            [nwg1@coffee2 nwg1]$pwd ;現在のディレクトリを表示する
            ;/home/nwg1

            [nwg1@coffee2 nwg1]$cd /home　；一つ上のhomeディレクトリに移動
            [nwg1@coffee2 /home]$ ls -l　　　；ディレクトリを表示
            ;total 28
            ;drwxr-xr-x 5 root root 　　4096 Nov 7 16:32 httpd
            ;drwx------ 2 nwg1 nwg1 4096 Nov 16 12:27 nwg0

            [nwg1@coffee2 /home]$chmod o+x nwg1 ;他人に対するアクセス許可を出す
            [nwg1@coffee2 /home]$ ls -l　　　　　　　　　；確認
            total 28
            drwxr-xr-x 5 root root 　　 4096 Nov 7 16:32 httpd
            drwx-----x 4 nwg1 nwg1 4096 Nov 17 10:05 nwg0
          3. アクセス属性
            drwx-----x　；先頭のdはディレクトリ、次から、3文字で、本人、グループ、他人に対するアクセス許可となる。ｒ：読む、ｗ：書く、x:実行できる
            ディレクトリを利用して配下のファイルにアクセスするにはx属性が必要である。
        4. ディレクトリ作成と確認
          ホームディレクトリにpublic_htmlを作成する。このディレクトリにも他人に対するアクセス許可が必要です。
          [nwg1@coffee2 /home]$cd　　　　　　　　　　　;ホームディレクトリに戻る

          [nwg1@coffee2 nwg1]$mkdir public_html　　；public_htmlディレクトリを作成する
          [nwg1@coffee2 nwg1]$ls -l　　　　　　　　　　　；ディレクトリを表示する
          ;total 8
          ;drwxrwxr-x 2 nwg0 nwg0 4096 Nov 16 12:35 public_html
        5. 終了コマンド
          exit　で接続を切る、quit　でtelnet終了する。
          ここまでは、通常はプロバイダー側の責任で行う処理です。
          ●使用したコマンドを記録する。
    3. ｆｔｐで送る
      1. 起動、接続
        プログラムメニューFFFTPを選択し、FFFTPを起動します。
        150.42.41.135に接続します。ユーザ名、パスワードはtelnetの場合と同じです。
        1. 接続
          起動するとホスト一覧が表示されまが、これは「閉じる」して、接続メニューから、「クイック接続」を選択する。接続先ウインドウのホスト名に150.42.41.135、ユーザ名にグループ名（nwg1等）、パスワードにパスワードを設定する。okボタンを押すと接続を開始する。
          1. 接続の設定（実際の画面とは異なる）

      2. 転送する
        左にサーバーのホームディレクトリが、右に自分のPCのディレクトリが見える。左のフォルダをドライブDのフォルダhomeに変更する。右のフォルダではpublic_htmlを選択する。作成したindex.htmファイルおよび画像ファイルを選択し右にドラッグして転送する。あるいは、上向き矢印でアップロードを行う。
        1. ファイル転送

      3. 記録
        ●転送したときの、PC側とサーバー側のフォルダの名前を記録する。
    4. 自分のページを見る
      URLとして下記を指定します。
      　coffee2.ccad.sccs.chukyo-u.ac.jp /~nwg1/index.htm
      1. 接続できない
        Forbidden、You don't have permission to access /~nwg1/index.htm on this server.
        などとでる場合。アクセス権を確認して下さい。
トップに戻る