Webページ作成チュートリアル

はじめに

このページでは、簡単な Web ページを作成するチュートリアルを行います。
次のような人を対象としています。

  • 初めて Web ページを作成する方
  • HTML ファイルについてよく知らない方
  • 情報処理教育システムでの Web ページ作成方法がわからない方


手順通りに操作を行えば誰でも Web ページを作成できるようになっています。
パソコン操作が苦手な方もぜひトライしてみてください。

HTML ファイルを作成する

  1. 画面左下の検索窓に「メモ帳」とタイプし、表示されたメモ帳の「開く」をクリックします。

  2. Web ページに表示したい内容を HTML 形式で入力します。
    今回は「Hello World!」と表示するだけの Web ページとします。
    画像のテキストを入力するか、次のテキストをコピーして貼り付けてください。


    <!DOCTYPE html>
    <html>
    <body>
    Hello World!
    </body>
    </html>
  3. HTML ファイルを保存します。
    「ファイル」→「名前を付けて保存」をクリックし、名前を付けて保存ダイアログを表示します。
    左のフォルダ一覧から「ホームフォルダ」→「public_html」の順にクリックし、public_html フォルダを表示します。
    ファイル名を「index.html」に、文字コードを「UTF-8」に変更し、保存をクリックします。

    ※文字コードを「UTF-8」に変更しないと日本語の文字化けが発生します。
  4. HTML ファイルが作成されました。
    メモ帳は閉じても構いません。

【杉本キャンパス限定】 HTML ファイルを杉本キャンパス内に公開する

  1. 公開前に、HTML ファイルが正しく表示されるか確認しておきましょう。
    「ホームフォルダ」→「public_html」を開き、index.html をダブルクリックします。
    Google Chrome が起動し、「Hello World!」と表示されたら成功です。


    ※HTML ファイルがない場合は、ファイルの保存場所に注意しつつ手順 1 〜 3 をやり直してください。
    ※「Hello World!」と表示されない場合は、手順 8 に従って HTML ファイルの内容が手順 2 のものと同じかどうか確認してください。
    ※Google Chrome が開かない場合は、ファイル名が正しく「index.html」となっているか確認してください。
  2. 正しく表示されたら、杉本キャンパス内での公開設定を行います。
    こちらのページ の「1.杉本キャンパスの情報教育PCで直接ファイルを作成した場合」手順 3 〜 手順 12 を参考に設定してください。
    公開設定手順は、杉本キャンパスに設置された情報教育PCでのみ実施可能です。
  3. 公開設定が完了したら、Web ページが正しく表示されるか確認します。
    Google Chrome のアドレスバーに「https://www.ecs.osaka-cu.ac.jp/~[OMUID]」を入力し、Enter キーを押します。
    先程作成した index.html の内容が表示されたら、Web ページが正しく公開されています。


    ※OMUID は小文字で入力してください。
    ※「Forbidden」と表示される場合は、手順6の公開設定が正しく行えているか確認してください。
    ※この段階で公開できている範囲は杉本キャンパス内の 端末(杉本キャンパスのネットワークに接続した端末)のみです。
    学外公開する場合は こちら を参考にしてください。

HTML ファイルを編集する場合

  1. HTML ファイルをテキストエディタで開きます。
    「index.html」を右クリックし、「編集」をクリックします。
    (ダブルクリックすると Google Chrome が開いてしまうので注意)

  2. 入力が終わったら、「ファイル」→「上書き保存」をクリックして保存し、エディタを終了します。

さいごに

以上で Web ページ作成チュートリアルは終了です。
今回は非常に簡素な Web ページを作成しましたが、レイアウトを工夫したり、画像や CSS ファイルを追加することによって見栄えの良い Web ページに仕上がります。
「【杉本キャンパス限定】Webページ作成」 を参考にして、ぜひチャレンジしてみてください。
上記ページ内の「Webページ作成サイト」の項目に限り、杉本キャンパス以外の方も参照いただけます。