HTML復習編

Xamppで表示

Xamppの起動

 Xamppで確認するため、まずはXamppコントロールパネルを起動してApacheをスタートして下さい。すでに準備編でやりました。Xamppフォルダの中のxampp-control.exeという実行ファイルをダブルクリックし、Xamppコントロールパネルを開きます。「Apache」の「Start」ボタンをクリックするとApacheが起動されます。Xamppのバージョンによってボタンの配置やスタートの表現方法が少し違うようですが大体わかると思います。

  

ひな形をコピー

 Xamppが起動したら、Xamppフォルダ→htdocsフォルダ→phpkisoフォルダとたどり、すでに作ったひな形ファイルhina.htmlをコピーします。エクスプローラーでhina.htmlを選択、キーボードで[Ctrl]+[c]でコピー、[Ctrl]+[v]で貼り付けられます。もちろん、エクスプローラーのメニューでコピー→貼り付け、とやってもいいですが、ショートカットキーを覚えておくと後から楽です。Windowsなら何でも[Ctrl]+[c]でコピー→[Ctrl]+[v]で貼り付けでOK。
 ファイルをコピーすると「hina - コピー.html」のようなファイルができますので名前を変更します。この後の作業で使うため「yokoso.html」と変更しましょう。ファイル名の変更はエクスプローラーでできます。

localhostから確認

 それではyokoso.htmlがどう表示されるか確認します。この時やってはいけないのはダブルクリック。やると壊れることはありませんが、それではサーバー経由で表示できているかどうか確かめられません。そこでブラウザを起動しアドレスバーに以下のURLを入力します。

  

 準備編の資料で、http://localhost/ が、Xamppフォルダの中の「htdocsフォルダ」を参照するように設定されていると説明しました。そしてその中の「phpkisoフォルダ」にひな形ファイルと今回のyokoso.htmlを作りました。その場合は、http://localhost/ に続けて phpkiso/yokoso.html と設定することでファイルが参照できます。コンピュータ内の保存フォルダ(ディレクトリ)と、URLとの対応関係について確認しておいて下さい。
 そして正常にアクセスできれば、次のように表示されるはずです。URLがlocalhost~となっているところをよく見て下さい。

  

 HTMLやCSSの動作確認ならlocalhost経由じゃなくてもきちんと表示されますが、PHPになると正常には表示されなくなります。準備編でも書きましたが、PHPはサーバー側で処理された結果だけがブラウザに送られることになっているため、サーバー経由で表示しないと処理前のファイルがブラウザに届いてしまい正常に表示されなくなる、ということです。
 ということで、続けてyokoso.htmlを修正してHTMLの基本を手っ取り早く確認しましょう。


関連リンク



SPONSORED LINK





ページのトップへ戻る
SPONSORED LINK