PHPを書く前の下準備としてHTMLのひな形(テンプレート)を作る

  • このエントリーをはてなブックマークに追加

WEBサイトはHTMLで構成されています。PHPを学習する前にHTMLのルールや役割を知っておく必要があります

私はwindows98が出たころに、htmlの本を見ながらホームページを作ったことがあるのでリンクや画像タグがどういうものか知っています。

ですが、覚えているわけではありません。見本もなくhtmlを入力することはできません。

例えて言うなら「漢字は読めるけど書けない」みたいなものです。見ればわかりますが、書けないってやつです。

だから、身構えることはありません。細かい入力文字を覚えるのではなくルールと役割を押さえておけば大丈夫です。

そしていつでも使いまわせるHTMLのテンプレートを作ります。

HTMLのテンプレート

TeraPadを開いて下記のようにに文字を入力してください。「PHP基礎」以外は半角です。アルファベットの大文字と小文字にも気を付けて下さい。

赤い下線部分はスペースです。

入力できたらファイル名を「hina.html」にしてデスクトップに保存してください。このファイルに入力した文字はこの後のPHPの学習で何度も使います。

HTMLのテンプレートを使って実際にブラウザ上でどういう表示になるか見てみる

上記で作ったHTMLは一体何がかかれているのでしょうか。これを見るためにXAMPPの設定をしてきたんでしたね。

早速XAMPPを起動します。ApachのStartをクリックします。Runningが点灯すればOKです。

(画面の表面にに表示しておく必要はないので「―」で最小化して表に表示されないようにしてください)

HTMLテンプレートをコピーする

自分のデスクトップ上に保存した「hina.html」はこれから使いまわす原本です。中身を変えないように注意してください。

「hina.html」をコピーして前回作ったphpkisoフォルダ内に貼り付けます。

そして名前をwellcome.htmlに変更します。

wellcome.htmlをTeraPadで開く

TeraPadを新しく開いてwellcome.htmlをドラック&ドロップで移動させて開きます。

TeraPadは下記のような文字が表示されました。

9行目に下記の文字を入力します。

<font color=”#ff0000″>こんにちは</font>

「こんにちは」以外は半角で入力します。

入力後、上書き保存します。

何か入力するたびに上書きをするようにします。

ショートカットキーで上書きする方法がおススメです。

「Ctrl」と「S」キーを同時に押すと上書きされるのでラクです。

ファイルから上書き保存する場合は下図のように行います。

ちなみに上書きがされていないと*が出ています。

 

いったん入力した文字がブラウザ上ではどんな表示になっているか見てみます。

いつも使っているブラウザ(インターネットエクスプローラー、グーグルクロム等)を開いてURLを入力します。

URLは http://localhost/phpkiso/wellcome.html です。

ファイルのwellcome.htmlを直接クリックして開いてはいけません。

 

下記のようにブラウザ上で表示されます。

あんなにたくさん文字が入力されていたのに、プラウザの表示はすごくシンプルです。そして赤字になっています。

ブラウザは閉じずに縮小しておいて、さらにTeraPadに追加で入力していきます。

と、その前に2つ準備をする必要があります。

画像とリンクで飛んでいく先のページ作りです。

画像は好きなものを1つか2つ用意してphpkisoの中に保存します。(画像の名前は自由につけてください。)

私はchiwawa.jpgとneko.jpgと名前を付けた画像を保存しました。画像が用意できない場合は下のイラスト保存してを使ってください。

(無料の可愛いイラスト素材屋さんから探せますhttp://www.irasutoya.com/)

 

デスクトップに保存してあるhina.htmlをコピーして名前をkonichiwa.htmlに変更して同じくphpkisoの中に保存します。

そしてTeraPadで開き9|に「このページにハイパーリンクで飛んできました。」(本当は何でもいいです。)に文字入力します。

 

この時、文字にhtmlタグで文字の色やサイズの指定をする必要はありません。

ダイレクトに入力すればいいです。上書き保存を忘れないでください。

下記のようにphpkiso内に追加されているか確認出来たら準備完了です。

 

次からの作業は一つづつhtmlタグを追加しては、ブラウザ上で見るという作業を行うと理解しやすいです。

どのhtmlタグが文字や画像に対して機能や装飾を持たせているかがよくわかります。

ここでは面倒なのですっ飛ばして全部入力してみました。

下図の赤枠内が入力部分です。入力し終わったら必ず上書き保存をします。

ブラウザで見るとこのように表示されました。

(ブラウザを開きっぱなしにしていると自動では読み込みが行われません。キーボードのF5を押して再読み込みします。)

TeraPadの行数字順で一つずつのタグの説明です。

たくさんタグが並んで見づらいですが一つずつ目で追っていくと何となくわかります。

 

1|~7|と19|20|はHTMLを書く時のルールです。

ひな形で初めに作っておいたファイルをコピーしてファイル名を変更して使いまわしています。

それなのですべてのファイル(ページ)にはこのHTMLタグが入ります。

5|タイトル

7|<body>と19|</body>の間にHTMLタグを入力する

 

以下は自由に自分でHTMLタグを入力することができます。

9|「こんにちは」赤い文字#ff0000文字サイズ7(7が最大)

10|<br/>は改行の意味

11|「チワワ」緑文字でサイズ5。

12|TeraPad上では改行されていますが、改行タグの<br/>が入っていないのでブラウザ上では改行なしでチワワの文字のすぐ横にイラストが表示されています。

13|改行

14|改行

15|「ネコ」青文字、文字サイズ3

16|改行

17|猫のイラストにハイパーリンクを貼っている(下の切り取り画像ではわかりにくいですが、実際に作った画面でネコのイラストにマウスポインタをのせるとリンクできるポインタ(手のマーク)に代わります。)

 

ネコのイラストをクリックすると新しく作った「konichiwa.html」のページに移動しました。


上記で入力したタグの一覧と説明

全てのhtmlタグを見なくても入力できるほど覚える必要はないとは思いますが、どのタグがどういう役割をするかということは覚えておいたほうが作業がスムーズです。

———————————————————————————————-

文字色の指定(×××には色を付けたい文字が入ります。)
<font color=”#ff0000″>×××</font>
実際に使用したときの入力の仕方<font color=”#ff0000″>こんにちは</font>

———————————————————————————————-

文字色と文字サイズの指定(×××には色と文字サイズを指定したい文字が入ります。)
<font color=”#ff0000″size=”7″>×××</font>
実際に使用したときの入力の仕方
<font color=”#ff0000″size=”7″>今日の天気</font>

———————————————————————————————-

画像の挿入(△△△は画像ファイル名・自分でつけたファイル名を入力)
<img src=”△△△”>
実際に使用したときの入力の仕方
<img src=”neko.jpg”>

———————————————————————————————-

画像にハイパーリンクを挿入(〇〇〇には飛んでいきたい先のページURLが入ります・△△△には画像ファイル名が入ります。)
<a href=”〇〇〇”><img src=”△△△”></a>
実際に使用したときの入力の仕方
<a href=”konichiha.html”><img src=”neko.jpg”></a>

———————————————————————————————-

文字にハイパーリンクを挿入
<a href=”〇〇〇”>×××</a>
(〇〇〇には飛んでいきたい先のページURL・×××にはリンクを貼りたい文字が入ります。)
実際に使用したときの入力の仕方
<a href=”konichiha.html”>次のページへ</a>

———————————————————————————————-

改行
<br/>
実際に使用したときのブラウザ上での表示のされ方 (<br/>タグは改行タグなのでブラウザの画面上に表示されません。)
下記は「こんにちは」の後に<br/>タグを入力してるので次の「今日はいい天気ですね」が改行されて下に表示されています。
こんにちは
今日はいい天気ですね


htmlタグを使用して1ページを作ってきました。

次回からはPHPの入力に入ります。

htmlに入力のルールがあるように、きっとPHPにも同じように入力するときのルールがあるはずです。

新しい言語やスポーツを習うのと同じように、どうしてそうなるのかを考えるより「こういうものなんだ」という姿勢が大事ですね。

 

  • このエントリーをはてなブックマークに追加

SNSでもご購読できます。