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ページ作成サイト」の項目に限り、杉本キャンパス以外の方も参照いただけます。