各自のトップページ作成【 PC版 】

前回までの練習用ページで、ある程度は HTML 文書に馴れてきたので、今回と次週で最終的な各自の Web ページ作りを行う。

◆トップページの作成

  1.Google Chrome」 を起動し、 サンプルページ を開く。
    今回の最終的な完成目標はこのページです。

  2. "index.html" ファイルの作成

    (1). このページ を開く。(サンプルページのソース)

    (2). 背景が水色・ピンク・黄色の部分をドラッグで選択状態にし、"Ctrl + C" でコピーする。 (クリップボードに入れる)


    (3). "TeraPad" を開いて、"Ctrl + V" で貼り付ける。

    (4). サンプルページのソースを参照し、赤い文字の部分を各自の情報に変更する。

    (5). "TeraPad" のメニューバー「ファイル」 → 「名前を付けて保存」を選択する。
     保存する場所はデスクトップとし、ファイルの種類で「HTMLファイル」を選択、
     ファイル名 "index.html" で保存する。


  3. 修正したトップページのファイル (index.html) を WinSCP でサーバにアップロードする。
   アップロードができたら、「全履修学生のページ」で確認する。



◆自己紹介のページ (profile.html) の作成

  1. Webブラウザでの作業
   ① サンプルページを開く。
   ② Webブラウザのウインドウ内で右クリックして「ページのソースを表示」を選択する。
   ③ "Ctrl + A" で全てを選択状態にし、 "Ctrl + C" でソースの内容をコピーする。

  2. TeraPad の作業
   ① "TeraPad"を起動し、"Ctrl + V" で貼り付ける。
   ② メニューバーより、「ファイル」 → 「名前を付けて保存」 を選択し、ファイル名 "profile.html"
     で保存する。
   ③ 各自の内容に変更して「上書き保存」する。

  3. "WinSCP" で、サーバーに"profile.html"をアップロードする。

  4. 各自のWebページから「自己紹介」のリンクをクリックして表示するかを確認する。

  5. さらに変更したい場合は、2.~ 4.の作業を繰り返し行う。


全履修学生のページ


★ 参考ページ

  1. 表示色サンプル

  2. アクセスカウンター

  3. カウンターフォント