HTMLによるホームページ作成

  • ホームページを作成して、WEBサーバーへのアップロードを行って学内限定で公開してみる
  • 注意:アップロードと内容の確認は学内でしか行えない(文書編集は学外でもできる)
  • 実際には文書の内容を記述するHTML(XHTML)と見栄えを記述するスタイルシートCSSを分けて使用するのが一般的だが、簡単のため今回の内容はHTMLに限る(なお簡単に末尾の補足に説明)

ホームページの作成

次の例を参考にして、自己紹介のページ原稿(HTMLファイル)を作成してみる。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
           <title>理学太郎の自己紹介</title>
    </head>
    <body>
           <h1>理学太郎の自己紹介</h1>
           <h3>出身</h3>
            <p>
               愛媛県生まれですが、<strong>高知県</strong>で過ごした時間の方が長くなりました。
            </p>
           <h3>趣味</h3>
            <ul>
              <li>機械の中身をみること</li>
              <li>天体観測</li>
              <li>化石収集</li>
            </ul>
             <h3>リンク</h3>
             <ol>
                 <li><a href="http://www.kochi-u.ac.jp/">高知大学ホームページ</a></li>
                 <li><a href="http://www.google.co.jp/">Google 検索</a></li>
               </ol>
         <h3>画像</h3>
          <img src="http://www.is.kochi-u.ac.jp/images/flower6.jpg" alt="高知大学理学部"/>
      </body>
  </html>

HTMLファイルの作成

ブラウザで見る

いろいろなタグ

画像を追加で入れる

さらに自分が準備した画像をはりつけるには、作成中のhtmlファイルと同じディレクトリに画像 (test.gifという名前とする)をおいて、いかの記述を追加する。
         <h3>画像</h3>
          <img src="test.gif"  alt="ひまわり"/>

リロード

    * 追加(編集)ができたら、保存し、ブラウザで再表示(リロード)を行う

Webページの公開

WinSCP

  1. WinSCP のインストールと設定
    • ダウンロードしたwinscp***setup.exe を実行してインストール
    • スタートメニューまたはデスクトップのショートカットからWinSCPを起動
    • 最初は、ホスト名(アドレス)に www.s.kochi-u.ac.jp を入力
    • ユーザ名に グループウェアのアカウント名( 例えば b093k999x (最後の1文字を含む))と, パスワードを入力
    • 下側の ””保存ボタンを押す
    • 接続先のリストができる(以降は、このリストを使って接続)
  2. WinSCP ログインと公開用フォルダの設定
    • リストから接続先をクリックして、「ログイン」をクリック
    • 右側の「ホスト」側をクリックして、「新規」-> 「ディレクトリ」を選択
    • public_html という名前で サーバ側に 新しいフォルダを作成し、そのフォルダをダブルクリックで開く
    • 左の「ローカル」側をクリックして、自分の Documents フォルダ(例 C:¥Users¥Owner¥Documents , Owner ではなく、自分の名前かも)を表示
    • intro.html を選んで、右側のホストのスペースにドラッグ
    • 右のホスト側に intro.html ができたことを確認
    • 左のローカル側フォルダはダブルクリックで選択し、サブフォルダを順次ダブルクリックで開く
  3. 公開 HTML ファイルを確認
    • インターネットエクスプローラの URL(アドレス)表示のところに http://www.s.kochi-u.ac.jp/~b093k999x/intro.html のように入れて、自分の Webページが表示されることを確認

WinSCPの終了と再接続

課題8

上記を参考にして自分のホームページをindex.htmlという名前で作成し、WEBにアップロードしてください。なお、この際、以下の要件を満たすようにしてください。  
                p.sample1{
                 background-color: #00ff00;
                 color: #ffffff;
             }
                     <p class="sample1"> </p>でくくられた領域のスタイルを指定
 
     cssに興味のある人は自主的にさらに、ここなど調べてみてください。課題にはCSSを使ってもかまわない。