PHPプログラミング。入門、入門、超入門！開発環境の設定方法から掲示板の作り方までサンプルで学習する入門サイト |
HTML復習編文字と画像
文字の装飾前のページの続き。yokoso.htmlファイルを作成し、テキストエディタ(Terapad等)で開いている状態から話を進めます。もちろん、XamppコントロールパネルからApacheがスタートした状態です。ここでやるのはまず文字の表示。そして装飾です。 その前にまずタイトルを変更しましょう。ブラウザのタブやアクティブバーに表示されるタイトルです。テキストエディタで開いているyokoso.htmlの内容をよく見て、<title>～</title>の間に「ウェルカムページ」と書き込みましょう。 書き込んだら[Ctrl]+[s]で上書き保存して、ブラウザでhttp://localhost/phpkiso/yokoso.htmlにアクセスします。作成したHTMLファイルをダブルクリックしたり、Terapadを使っている場合はTerapadツールバーにある[IEで開く]ボタンを使ってはいけません。Xamppを使って仮想サーバーlocalhostを経由して表示させて下さい。 ちなみに「上書き保存」はメニューからも行えますが、[Ctrl]+[s]のショートカットキーを覚えておくと便利です。何か更新したら[Ctrl]+[s]を押すのを癖にしておくと「保存し忘れたぁ～」とか「保存する前に消えちゃったー！」ということを防げます。 SPONSORED LINK
ブラウザのタブやアクティブバーに「ウェルカムページ」と表示されましたか？表示されない場合はもう一度よく見て間違いがないか確認して下さい。  さてここからが本番です。テキストエディタでyokoso.htmlの中から、ページの本文を書く領域、つまり<body>と</body>の間を確かめて下さい。「ここが本文」と書いてあるなら消して「ようこそ」次の行に「いらっしゃい」と入力しましょう。 入力したら[Ctrl]+[s]で上書き保存してブラウザの表示を更新します。すると改行がなくなっていることに気づくと思います。HTMLでは改行して書いたのに、ブラウザには「ようこそいらっしゃい」と続けて表示されています。なぜかというとテキストエディタとかWordとかで普通に行う「改行」は、HTMLの中では無視されるからです。ではどうするか。それは改行のための<br>タグを使います。そこで次のように入力してみましょう。 きちんと改行されましたか？ところでこの<br>タグには終了タグがありませんので単体で使います。ブラウザ表示すると、<br>タグを書いたところで改行されます。あと<br/>という書き方をすることがありますがこれも<br>と同じで、書いたところで改行されます。  次に文字の装飾を行います。先ほど入力した「ようこそ」の文字を挟むように次のようにHTMLタグを追加して書き込んで下さい。 追加した<font>タグは文字の色やサイズを変える時に使うタグです。colorは色を設定する属性でここでは「red」が指定してあります。sizeは文字の大きさを指定する属性で最小の1～最大の7まで設定できます。それぞれ属性の後はイコールが入力され、属性値はダブルコーテーションで挟んであります。ダブルコーテーションは、[Shift]を押しながら、キーボードの左上の方にある数字の「2」のキーを押すと表示されます。 SPONSORED LINK
結果は、次のように、<font>タグで囲まれた「ようこそ」だけが、文字が赤く、大きくなったらOKです。もしならなかったら、どこかにミスがあるはずですのでよく調べましょう。  他にも太字にしたりイタリックにしたり下線を引いたり・・文字を装飾する方法はいろいろありますので詳しく知りたい場合は文字を装飾するタグを確認して下さい。 画像の表示次に画像の表示方法を確認しましょう。そのためまずは画像ファイルが必要になります。練習用の画像はこちらを右クリックして「ファイルに保存」を選び、名前を付けてphpkisoフォルダに保存して下さい。画像ファイル名はそのまま「p01.jpg」です。保存したら、テキストエディタで開いているyokoso.htmlに次のように書き込みます。追加したのは<img>タグです。イメージタグということで、画像を表示する際に使います。<img>タグには、</img>のような「終了タグ」がありません。src属性は、ソースということで、表示する画像ファイルを指定します。入力が終わったら[Ctrl]+[s]で上書き保存して、ブラウザの表示を更新しましょう。  これでもいいですが、「いらっしゃい」という文字と画像が横並びになってしまっています。そこで「いらっしゃい」の後に改行を入れたいわけですが、どうしたらいいかわかりますよね？それから画像の表示サイズを横長にしたい、という場合を想定して次のように入力してみましょう。 SPONSORED LINK
まず「いらっしゃい」の後に<br>タグを入れて改行を実現しました。一方、<img>タグの中には、幅を指定するwidth属性と、高さを指定するheight属性を指定し、それぞれ600pxと200pxと入力しました。pxというのは画素(ピクセル)のこと。デジカメやスマホカメラで400万画素と言ったりしますがデジタル画像を構成する色の粒と思ってもらえればOKかと。つまり、横に600、縦に200の粒でできた横長な画像に変形させたわけです。[Ctrl]+[s]で上書き保存して、ブラウザの表示を更新して下さい。思い通りに表示されましたか？できない場合は、入力に間違いがないかよく確かめてみて下さい。  画像には他にも枠をつけたり余白を設定したり画面の右とか中央に配置するための属性があります。詳しくは画像タグについてを参考にして下さい。 続いて、PHPに不可欠な入力フォームのHTMLについて確認しましょう。 >>次のページへ進む
|
ページのトップへ戻る
SPONSORED LINK