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

対象者

学生
教員

はじめに

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

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

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

HTML ファイルを作成する

画面左下の検索窓に「メモ帳」とタイプし、表示されたメモ帳の「開く」をクリックします。
Web ページに表示したい内容を HTML 形式で入力します。
今回は「Hello World!」と表示するだけの Web ページとします。
画像のテキストを入力するか、次のテキストをコピーして貼り付けてください。

<!DOCTYPE html>
<html>
<body>
Hello World!
</body>
</html>
HTML ファイルを保存します。
「ファイル」→「名前を付けて保存」をクリックし、名前を付けて保存ダイアログを表示します。
左のフォルダ一覧から「ホームフォルダ」→「public_html」の順にクリックし、public_html フォルダを表示します。
ファイル名を「index.html」に、文字コードを「UTF-8」に変更し、保存をクリックします。
※文字コードを「UTF-8」に変更しないと日本語の文字化けが発生します。
HTML ファイルが作成されました。
メモ帳は閉じても構いません。

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

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

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

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

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

HTML ファイルをテキストエディタで開きます。
「index.html」を右クリックし、「編集」をクリックします。
（ダブルクリックすると Google Chrome が開いてしまうので注意）
入力が終わったら、「ファイル」→「上書き保存」をクリックして保存し、エディタを終了します。

さいごに

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